前端前端 CSS

CSS基础

Tom2023-09-152024-07-05

css基础1

层叠样式表,用来表现HTML等文件样式的计算机语言。

CSS版本

CSS1: 1996年12月17日成为W3C推荐标准，该版本中提供了有关文字、颜色、位置和文本属性等基本信息。
CSS2: 1998年5月,样式单得到了更多的充实。
CSS3: 1999年开始制订，2001年5月23日W3C完成了CSS3的工作草案。各浏览器厂商对CSS3的支持也在不断的完善中。

HTML中使用CSS有三种方式：

标签中使用style属性。行间样式也叫作内联样式。
使用<style>标签。通常我们把<style>标签放在<head>标签中,也叫作内部样式。
外部.css文件，使用<link rel="stylesheet" href="">引入到HTML文档中。推荐使用

CSS 三大特性

继承性:给父元素设置的属性,子孙元素也可以使用。
层叠性:层叠性只有在多个选择器中选择同一个标签,然后又设置了相同的属性,才会发生层叠。
优先级:当多个选择器选择同一个标签,并且给同一个标签设置属性时,如何层叠由优先级来决定.

各引入方式优先级：内联样式 > 内部样式 - 外部样式 > 浏览器默认样式

导入外部样式表到当前

@import

1
2
3

@import url("global.css");
@import url(global.css);
@import "global.css";

CSS语法

为HTML标签设置一组样式也可以叫作设置CSS规则。CSS规则中必须包含选择器和一条及以上的声明。

在CSS中可以使用 /* */为样式添加注释。

CSS规则会有叠加的效果，优先级高的规则将覆盖优先级低的规则。同等优先级情况下后面的将覆盖前面的。

CSS选择器

要为HTML标签元素设置样式需要先选中该元素，使用css选择器可以选中HTML标签。

基础选择器

标签选择器（元素选择器）

E 以HTML中元素名称作为选择符

1
2
3

h2{background:red;}
p{background:red;}
div{background:blue;}

ID选择器

# 以HTML标签中id属性的值作为选择符（唯一）。
1
2
#box1{color:red;}
#box2{color:red;}

类别选择器

.以HTML标签中class属性的值作为选择符（可匹配多个）。
1
2
.box1{color:green;}
.box2{color:green;}

属性选择器

[att] 具有att属性的元素
[att="val"] 选择具有att属性且属性值等于val的E元素。
[att~="val"] 选择具有att属性且属性值为一用空格分隔的字词列表，其中一个等于val的元素。
[att|="val"] 选择具有att属性且属性值为以val开头并用连接符”-“分隔的字符串的E元素，如果属性值仅为val，也将被选择。

通配符 *

通配符 * 选定所有HTML标签

复合选择器

复合选择器有两个及以上的选择器组合而成，也叫作组合选择器。

关系选择器

E F后代选择器（间接子级）：匹配那些由第一个元素作为祖先元素的所有第二个元素(后代元素) ，不需要相匹配元素之间要有严格的父子关系。
E>F子元素选择器（直接子级）：匹配那些作为第一个元素的直接后代(子元素)的第二元素.
E+F相邻兄弟选择器：当第二个元素紧跟在第一个元素之后，并且两个元素都是属于同一个父元素的子元素，则第二个元素将被选中。

选择器优先级：描述越具体优先级越高
!important 提升指定样式条目的应用优先权

单位取值

长度

px 像素。绝对长度单位
in 英寸。绝对长度单位
cm 厘米。绝对长度单位
mm 毫米。绝对长度单位
q 1/4毫米。绝对长度单位
pt 点。绝对长度单位。
pc 派卡。绝对长度单位。相当于我国新四号铅字的尺寸

1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px 。绝对长度单位在使用时需要慎重。常用的绝对长度单位是px因为在前端的视觉稿 .psd 通常都是以像素为单位绘制的。

em 相对于当前对象内文本的字体尺寸。相对长度单位
rem 相对于根元素(即html元素)font-size计算值的倍数。相对长度单位

颜色

Color Name 用颜色关键字来指定颜色。如：black、white、red、green…
HEX 十六进制记法。如：#rrggbb或#rgb
RGB rgb(R,G,B),三个参数，正整数值的取值范围为：0 - 255。百分数值的取值范围为：0.0% - 100.0%。
RGBA rgba (R,G,B,A) 在rgb基础之前增加了A 。A： Alpha透明度。取值0 - 1之间。

常用属性

继承性：CSS中部分为HTML标签设置属性样式给继承给子级标签。

背景

background 设置标签的背景。简写属性
- 标签可以使用颜色或图片作为背景
background-color 设置标签的背景颜色。
background-image 设置标签的背景图像。

在 CSS属性中有大量的 简写属性也叫作复合属性，这些简写属性可以将多条样式规则合并为一条，以提高书写效率，让编码更加简洁。

边框

border 定义元素边框的外观特性。简写属性

文本

文本颜色

color 指定颜色。

常用取值：Color Name、HEX、RGB

文字大小

font-size 定义元素的字体大小

字体

font-family 定义元素文本的字体名称序列

字体的粗细

font-weight 定义元素文本字体的粗细

normal：正常的字体。相当于数字值400
bold：粗体。相当于数字值700。
bolder：定义比继承值更重的值
lighter：定义比继承值更轻的值
用数字表示文本字体粗细。取值范围：100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

文本简写属性

font 简写属性。定义元素的文本特性。

语法：font：[ [font-style||font-variant||font-weight||font-stretch]?font-size[ /line-height]?font-family] | caption | icon | menu | message-box | small-caption | status-bar
使用font属性参数必须按照如上的排列顺序，且font-size和font-family必须填写。每个参数仅允许有一个值。

文本转换大小写

text-transform 定义元素的文本如何转换大小写

none：无转换
capitalize：将每个单词的第一个字母转换成大写
uppercase：将每个单词转换成大写
lowercase：将每个单词转换成小写

文本换行行为

white-space 指定元素是否保留文本间的空格、换行；指定文本超过边界时是否换行。

文本水平对齐

text-align 定义元素内容的水平对齐方式

文本垂直对齐

vertical-align 定义行内元素在行框内的垂直对齐方式

文本缩进

text-indent 定义块内文本内容的缩进

文本装饰

text-decoration 定义元素文本装饰

列表

list-style 设置列表项目相关内容

表格

border-collapse 设置或检索表格的行和单元格的边是否合并在一起

盒子模型

CSS盒模型有：内容（Content）、内边距（Padding）、边框（Border）、外边距（Margin）组成。

为元素设置宽、高

width 设置元素宽度
min-width 最小宽度
max-width 最大宽度
height 设置元素高度
min-height 最小高度
max-height 最大高度

内外边距

margin 为元素设置上右下左的外边距 ,复合属性。

四个参数：上、右、下、左
三个参数：上、左右、下
两个参数：上下、左右
一个参数：上右下左

margin参数取值：auto 根据父级容器自动计算位置。多用左右两侧边距计算。可以让元素居中显示。

/* box元素将在父元素中居中显示 */
.box{
    width:100px;
    margin:0 auto;
}

margin-top 设置元素上外边距
margin-bottom 设置元素下外边距
margin-right 设置元素右外边距
margin-left 设置元素左外边距

padding 为元素设置所有四个方向（上右下左）的内边距，复合属性

padding的值为四、三、二、一个时规则与margin一至。

padding-top 设置元素上内边距
padding-bottom 设置元素下内边距
padding-right 设置元素右内边距
padding-left 设置元素左内边距

定行宽度，超出文本显示为 …

p{
    border: 1px solid gray;
    width: 100px;
    /* 文本不换行 */
    white-space: nowrap;
    /* 超出文本隐藏 */
    overflow: hidden;
    /* 文本隐藏时显示 ... */
    text-overflow: ellipsis;
}

多行显示，超出部分显示…

-webkit-line-clamp CSS 属性可以把块容器中的内容限制为指定的行数.

p {
    width: 100px;
    height: 100px;
    border: 1px solid gray;
    display: -webkit-box;
    -webkit-line-clamp:3; /*限制当前块级元素中的内容的行数*/
    -webkit-box-orient: vertical;
}

-webkit-line-clamp参考文档

css基础2

块元素与内联元素

块元素

独占一行,默认情况下，其宽度自动填满其父元素宽度
可以设置width，height属性
可以设置margin和padding属性

内联元素

相邻的行内元素会排列在同一行里，直到一行排不下，才会换行，其宽度随元素的内容而变化
不支持设置width，height
除了margin-top、margin-bottom`，不支持外其它的内外边距都是支持的。

常用块元素：

1 2	<div> <h1> <h2> <h3> <h4> <h5> <h6> <p> <ul> <ol> <table> <tr> <tbody> <tfoot> <pre> ...

常用内联元素

1 2	<a> <s> <b> <input> <i> <span> <select> <sub> <sup> ...

修改标签类型: display
- display:block; 指定对象为块元素
- display:inline; 指定对象为内联元素
内联块：display:inline-block;
- 块元素在一行显示。
- 内嵌元素支持宽高。
- 不设置宽高时内容撑开宽高。
- 换行会被解析为一个空格。
- 在IE6，IE7下不支持块标签。

要去除 display:inline-block;元素间的间隙有两种方式：1. 删除换行和空格。2. 设置父级元素 font-size: 0;,然后再单独设置当前字体大小。

/* 去除 内联块 元素间 间隙示例*/
ul{
    font-size: 0;
}
ul>li{
    font-size: 16px;
    display: inline-block;
    background: gray;
    color: #fff;;
}

显示/隐藏元素

标签元素显示或隐藏有三种方式

display:none; 隐藏元素,不保留元素所占的空间。
visibility:hidden;隐藏元素，保留元素所点空间。
- visible：visible 设置元素可见。
opacity：<number>; 设置元素透明度。取值 0~1。0全透明，1不透明。

opacity:0也可以使元素隐藏，但需要它只是通过调整元素的透明度来实现，元素还在，还是可以点击的，而上面两种则不可以点击，使用时需要注意。

元素滚动行为：overflow

标签元素处理溢出内容的方式

overflow: hidden; 当内容超出时隐藏超出部分。
overflow: scroll; 设置元素有滚动条。无论是否超出内容滚动条都会出现
overflow: auto; 当内容超出时呈现滚动条，反之则没有滚动条。相比于 overflow: scroll;用户体验更好。
overflow: visible overflow的默认取值，对超出部分不作任何处理。

也可以c通过overflow-x,overflow-y设置X,Y轴的滚动行为。

浮动

最初，引入 float 属性是为了能让 web 开发人员实现简单的布局，包括在一列文本中浮动的图像，文字环绕在它的左边或右边。你可能在报纸版面上看到过。但 Web 开发人员很快意识到，任何东西都可以浮动，而不仅仅是图像，所以浮动的使用范围扩大了。浮动曾被用来实现整个网站页面的布局，它使信息列得以横向排列

想要将元素排列到一行可以使用display:inline-block; 但是内联块会存在间隙的问题。这里可以选择浮动的方式将元素排列到一行。
浮动为左浮动float:left;和右浮动float:right;

浮动的特点

块元素在一行显示。
内嵌元素支持宽高。
不设置宽高时内容撑开宽高。
脱离文档流。
按照给定的方向移动位置。
直到遇到父级元素边界或另外一个浮动元素停止移动。
提升元素层级(浮动元素后面的元素就占用了浮动元素的位置,但元素中内容不会移动)

清浮动

清浮动是由于浮动时提升元素的层级，脱离了文档流破坏了文档流结构。
清浮动有以上6种常用方式：

给父级也添加浮动

父级元素中如果有margin: 0 auto;左右居中的效果将失去作用
给父级添加display: inline-block;

父级元素中如果有margin: 0 auto;左右居中的效果也将失去作用。

在浮动元素下添加空标签清除浮动

<style>
    .box1{width: 100px;margin: 0 auto;border: 5px solid red;}
    .box2{width: 100px;height: 100px;background: blue; float: left;}
    .clear{clear:both;}
</style>

<div class="box1">
    <div class="box2"></div>
    <div class="clear"></div>
</div>

IE6下会有最小高度问题（IE6下高度小于19px的元素，高度会被设置为19px，解决方案设置font-size:0,但仍然会有2px的高度。），IE5下margin: 0 auto;不起作用。

浮动元素下添加
标签清除浮动

<style>
    .box1{width: 100px;margin: 0 auto;border: 5px solid red;}
    .box2{width: 100px;height: 100px;background: blue; float: left;}
</style>

<div class="box1">
    <div class="box2"></div>
    <br clear='all'>
</div>

这样写不符合工作中：结构、样式、行为三者分离的原则。代码有耦合。

::after伪类清除浮动

<style>
    .box1{width: 100px;margin: 0 auto;border: 5px solid red;}
    .box2{width: 100px;height: 100px;background: blue; float: left;}
    .clear:after{content: '';display: block;clear: both;}
    .clear{zoom:1; }
</style>

<div class="box1 clear">
    <div class="box2"></div>
</div>

IE5/6/7下不支持:after伪类。但IE5/6/7下只要触发hasLayout就不需要清除浮动。使用zoom:1;触发 hasLayout 这样会对其它代码造成的干扰降到最低。

hasLayout介绍

overflow: hidden;清浮动

<style>
    .box1{width: 100px;margin: 0 auto;border: 5px solid red;overflow: hidden;}
    .box2{width: 100px;height: 100px;background: blue; float: left;}
</style>

<div class="box1">
    <div class="box2"></div>
</div>

IE5/6下不支持。解决为法：配合zoom:1;使用

定位 position

position 定位允许您从正常的文档流布局中取出元素，并使它们具有不同的行为，例如放在另一个元素的上面，或者始终保持在浏览器视窗内的同一位置。

定位分类

position: static; 静态定位
- 对象遵循常规流，默认定位选项
position: relative; 相对定位
position: absolute; 绝对定位
- 定位上下文：绝对定位元素的父元素的position属性。
position: fixed; 固定定位
- 定位上下文：偏移定位是以窗口为参考。

移动位置

top, bottom, left, 和 right 来精确指定要将定位元素移动到的位置。

定位层级

使用z-index属性，可以更改定位堆叠顺序。

z-index 的值为数字，数字越大堆叠在顶层，数字越小堆叠在底层。

伪类

伪类只有在一定的条件下才能作用到标签上。

超链接的4种状态

a:link {color:#FF0000;} / 未访问的链接 /
a:visited {color:#00FF00;} / 已访问的链接 /
a:hover {color:#FF00FF;} / 鼠标划过链接 /
a:active {color:#0000FF;} / 已选中的链接 /

注意：在CSS定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
注意：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。

E:focus 设置对象在成为输入焦点时的样式。
E:first-child 匹配第一个子元素
E:last-child匹配最后一个子元素

CSS(Sprites)精灵图（雪碧图）

CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的background-image,background-repeat,background-position的组合进行背景定位，background-position可以用数字精确地定位出背景图片的位置。