本文介绍了CSS的基础知识，包括选择器的使用，如标签选择器、多类名选择器、ID选择器和复合选择器；详细讲解了字体属性、文本属性、元素显示模式，如块元素、行内元素和行内块元素；还深入探讨了CSS盒子模型，涵盖边框、内边距和外边距。此外，文章还提到了一些实用技巧，如Emmet语法、元素显示模式转换和链接伪类选择器。
CSS是一种标记语言，负责网页的样式。
用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形（宽高、边框样式.边距等）以及版面的布局和外观显示样式。
语法：写在<style></style>标签之中，<style></style>标签写在<head></head>标签之中。
组成部分：选择器、一条或多条声明
h1 {/*选择器*/
color: red;/*声明*/
font-size: 25px;
}
选择器
选择器包括基础选择器、复合选择器。
标签选择器：直接使用标签名作为选择器，可以改变此类标签的样式。
选择器（常用）
.class（例如.xxx） 选择class="xxx"的元素
#id（例如#xxx） 选择id为xxx的元素
* 选择所有元素
多类名选择器：可以同时使用多个选择器。（实际操作中，便于抽取公共样式，易于修改，例如设置box类样式）
.acolor {
color: green;
}
.asize {
font-size: 20px;
}
/*同时使用多个类名*/
<div class="acolor asize">abc</div>
id选择器：以#定义，通过id调用，但只能调用一次。（常与js一起使用）
属性
字体属性
font-family： "Microsoft YaHei" //定义字体系列
font-size: 20px; //定义字体大小，标题标签比较特殊，需单独指定文字大小
font-weight: bold; //定义字体粗细，bold粗，lighter细，或直接输入数字font-weight: 700;（不带单位）
font-style: italic; //定义字体样式，斜体或正常体（normal）
复合属性
/*强制格式(不可变)，size和family属性必须存在
font: font-style font-weight font-size/line-height font-family;*/
font: italic 700 16px 'Microsoft yahei';
文本属性
color: red; //修改文字颜色，或用十六进制、rgb代码
text-align: center; //设置文本水平对齐，左、右、居中对齐
text-decoration: none; //装饰文本，underline下划线、overline上划线、line-through删除线
text-indent: 2em; //首行缩进
line-height: 20px; //行间距（包括了文字高度，但文字的高度不会改变）
em：一个相对单位，为当前元素一个文字的大小。
css外部引入（可控制多个页面）
放在head标签中
emmet语法
用于提高html、css编写速度。
快速生成HTML结构语法：
.demo 按tab会生成 <div class="demo"></div>
#demo 按tab会生成 <div id="demo"></div>
.demo$*5 按tab会生成
<div class="demo1"></div>
<div class="demo2"></div>
<div class="demo3"></div>
<div class="demo4"></div>
<div class="demo5"></div>
div{abababa} 按tab会生成 <div>abababa</div>
快速生成css样式语法：
w100 按tab会生成 width: 100px;
tac 按tab会生成 text-align: center;
lh26 按tab会生成 line-height: 26px;
快速格式化代码：shift+alt+f
复合选择器
-
由两个或多个基础选择器，通过不同的方式组合而成。
-
常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等等。
后代选择器
可以选择父元素里面子元素。可以嵌套，选到孙子。
格式：父元素 子元素 {样式;}
<ol>
<li>123456</li>
</ol>
<ul>
<a>5566</a>
<li>
<a>987654</a>
</li>
</ul>
<!--后代选择器，li标签是ol的后代-->
ol li {
color: pink;<!--只有li标签里的内容会变成粉色-->
}
ul a {
color: yellow;<!--所有a标签里的内容会变成黄色，包括孙子等后代-->
}
<!--只想选到孙子及以下的a标签-->
ul li a {
color: grey;
}
可以用.class名或#id名代替元素名。
<ol class="nav">
<li>123456</li>
</ol>
.nav li {
color: blue;
}
子元素选择器
只能选择作为某元素的最近一级子元素。只能选儿子，不能选孙子。
格式：父元素 > 子元素 {样式;}
ol > li {
color: blue;
}
并集选择器
可以选择多组标签同时为他们定义相同的样式。
通常用于集体声明。
由各选择器通过英文逗号连接而成，任何形式的选择器都可以作为并集选择器的一部分。
格式：元素1,元素2 {样式;}（一般竖着写）
div,
p{
color: red;
}
链接伪类选择器
用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素。
常用于链接。
用冒号(:)表示，比如:hover .:first-child。
a: link /*选择所有未被访问的链接*/
a: visited /*选择所有已被访问的链接*/
a: hover /*选择鼠标指针位于其上的链接（常用）*/
a: active /*选择活动链接（鼠标按下未弹起的链接）*/
/*给一个链接样式，要求链接为红色无下划线，点击后变为灰色*/
a {
color: red;
text-decoration: none;/*链接自带的样式有下划线，若要去掉则需自行定义*/
}
a: visited {
color: grey;/*访问过的链接变成灰色*
}
为了确保选择器生效，要按照顺序声明：link 、visited、hover 、active。
因为a链接在浏览器中具有默认样式，所以需要给链接单独指定样式。
:focus伪类选择器
用于选取获得焦点的表单元素。（例如点击输入框，输入框边框变色）
常用于表单。
格式：input:focus {样式;}
input:focus {
color: green;
}
元素显示模式
HTML元素一般分为块元素和行内元素两种类型。
块元素
常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。
块级元素的特点:
-
独占一行。
-
高度、宽度、外边距以及内边距都可以控制。
-
宽度默认是容器（父级宽度)的100%。
-
是一个容器及盒子，里面可以放行内或者块级元素。
文字类的元素内不能使用块级元素。（例如<p>里面不能放<div>） <h1>~<h6>也是文字类标签。
行内元素
常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签是最典型的行内元素。有的地方也将行内元素称为内联元素。
行内元素的特点∶
-
相邻行内元素在一行上，一行可以显示多个。
-
不可以直接设置高度、宽度。
-
默认宽度就是它本身内容的宽度。
-
行内元素只能容纳文本或其他行内元素。
链接里面不能再放链接。 特殊情况链接<a>里面可以放块级元素，但是给<a>转换一下块级模式最安全。
行内块元素
在行内元素中有几个特殊的标签<img/>、<input/>、<td>，它们同时具有块元素和行内元素的特点。
行内块元素的特点:
-
和相邻行内元素(行内块）在一行上，但是他们之间会有空白缝隙。一行可以显示多个(行内元素特点)。
-
默认宽度就是它本身内容的宽度(行内元素特点)。
-
高度，行高、外边距以及内边距都可以控制(块级元素特点)。
元素显示模式转换
一个模式的元素需要另外一种模式的特性时使用。（例如想给行内元素设置高度时）
想增加一个链接的触发范围时，转化为块元素display: block;
<a href="#">这是链接</a>
/*转换为块元素*/
a {
display: block;
}
转换为行内元素display: inline;
<div>这是块元素</div>
/*转换为行内元素*/
div {
display: inline;
}
转换为行内块元素display: inline-block;
文字垂直居中
让文字的行高等于盒子的高度，就可以让文字在当前盒子内垂直居中。
div {
height: 20px;
line-height: 20px;
}
因为文字行高包括了文字本身的高度、上空隙、下空隙，上空隙和下空隙相等。当行高等于盒子高度时，盒子正好被文字行高填满，上空隙和下空隙不可见，文字居中。
元素样式
背景颜色
background-color属性指定元素的背景颜色。
取值为transparent或其他color，transparent为透明无色的。
透明度
opacity 属性指定元素的透明度。取值范围为 0.0 - 1.0。值越低，越透明。
div {
background-color: green;
opacity: 0.3;
}
使用 opacity属性为元素的背景添加透明度时，其所有子元素都继承相同的透明度。
若不想对子元素应用不透明度，则使用 RGBA颜色值。
RGBA 颜色值指定为：rgba(red, green, blue, alpha)。alpha 参数是介于 0.0（完全透明）和 1.0（完全不透明）之间的数字。
div {
background: rgba(0, 128, 0, 0.3) /* 30% 不透明度的绿色背景 */
}
背景图像
background-image属性指定用作元素背景的图像。
background-image: url(图片地址路径);
默认情况下，图像会重复，以覆盖整个元素。
如果需要改变重复方式，可以使用background-repeat属性。 取值有repeat（默认） / no-repeat / repeat-x /repeat-y。
背景颜色和图片都加时，背景图片会盖在颜色上面。
background-position属性可以改变图片在背景中的位置。
background-position: x y;/*可以使用精确的xy坐标值或方位*/
/*方位取值：center、top、bottom、left、right*/
/*当第二个参数省略时，默认第二个参数为center*/
div {
background-image: url("tree.png");
background-position: right top;
}
/*使用精确的xy坐标值，当第二个参数省略时，默认第二个参数为center*/
div {
background-image: url("tree.png");
background-position: 20px 30px;
}
两种方式可以一起使用，为混合单位（强制了第一位是x轴，第二位是y轴）。
背景固定
background-attachment 属性指定背景图像是应该滚动还是固定的（不会随页面的其余部分一起滚动）。
常用于制作视差滚动效果。
取值：scroll（随内容对象滚动）或fixed（固定）
背景复合写法可以简化代码，格式：
background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;
/*例子*/
div {
background: transparent url(image.jpg) repeat-y fixed top;
}
CSS特性
给相同选择器设置相同的样式时，样式就会覆盖（层叠)另一个冲突的样式。
层叠性主要解决样式冲突的问题。
层叠性原则：样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式（执行最后那个，前面的样式被覆盖）。
css中子标签会继承父标签的部分样式。
子元素可以继承父元素的样式( text-、font-、 line-这些元素开头的可以继承，以及color属性)，高度、内外边距等无法继承。
<body>
<div>111</div>
</body>
/*行高的继承*/
body {
font: 12px/24px;/*设置字体为12px，行高为24px*/
}
/*行高可以用不带单位的数表示*/
body {
font: 12px/1.5;/*设置字体为12px，行高为当前元素文字大小的1.5倍*/
}
div {
font-size: 16px;/*div元素内字体大小为16排序，行高为16*1.5=24px*/
}
当同一个元素指定多个选择器，就会有优先级的产生。选择器相同，则执行层叠性。选择器不同，则根据选择器权重执行。
div {/*元素选择器*/
color: red;
}
.nav {/*类选择器*/
color: pink;
}
/*结果是为粉色，因为类选择器权重更高*/
/*若增加important，则结果为红色，因为important权重最高*/
div {
color: red!important;
}
继承的权重为0。
<div id="father">
<p>222</p>
</div>
/*css样式*/
#father{
color: blue;
}
p {
color: green;
}
/*结果为绿色，因为继承的蓝色权重为0，小于元素选择器*/
<a>链接标签有自带样式：蓝色、有下划线。
复合选择器会有权重的叠加。
CSS盒子模型
CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括:边框、外边距、内边距、和实际内容。
边框border
属性：边框粗细、边框样式、边框颜色
border-width: 5px; //边框粗细
border-style: solid; //边框样式，常用：solid为实线，dashed为虚线，dotted为点线。
border-color: black; //边框颜色
/*复合写法*/
/*border: 粗细 样式 颜色;顺序无所谓*/
border: 2px solid red;
/*可修改边框单独的一边*/
border-left: 1px solid pink;
border-collapse属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框。
border-collapse: collapse;//表示相邻边框合并在一起，防止两个单元格边框相邻时，边框变粗
边框会增加盒子的实际大小，例如200px的盒子有5px的边框时，实际宽度为210px。
内边距padding
用于设置内容和边框之间的距离。
复合写法：
内边距会增加盒子的实际大小，例如200px的盒子有5px的内边距时，实际宽度为210px。
当盒子本身没有指定width/height属性时，padding不会撑开盒子大小。
外边距margin
用于控制盒子之间的距离。
外边距可以让块级盒子水平居中，但是必须满足两个条件： 1. 盒子必须指定了宽度（width )。 2. 盒子左右的外边距都设置为auto。（margin: auto;） 若要行内盒子和行内块盒子水平居中，需要为其父元素添加text-align: center;
外边距合并
使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。
对于两个嵌套关系(父子关系)的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。（父元素和子元素哪个外边距大，执行哪个）
解决办法：
-
可以为父元素定义上边框。（border: 1px solid transparent;）
-
可以为父元素定义上内边距。
-
可以为父元素添加overflow: hidden。
网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此我们在布局前，首先要清除下网页元素的内外边距。
/*CSS第一行代码，后面再写样式覆盖*/
* {
padding: 0;
margin: 0;
}
行内元素设置上下内外边距时，需要先转换为块级或行内块元素。
标签都是有语义的，合理的地方用合理的标签。比如产品标题就用h，大量文字段落就用p。
shift+alt鼠标下拉可同时操作多行。
如何去掉li前面的符号：list-style: none;
圆角
border-radius: length;//length为圆的半径，数值越大，圆角弧度越明显
/*单个设置一个角时*/
border-top-left-radius: 30%;//可以是数值或百分比（百分之矩形高度）
盒子阴影
/*box-shadow: h-shadow v-shadow blur spread color inset;*/
box-shadow: 10px 10px 5px 6px rgb(0,0,0,0.3);(阴影默认为outset)
阴影不会占据空间，不会影响盒子排列。
文字阴影：text-shadow
/*box-shadow: h-shadow v-shadow blur color;*/
box-shadow: 10px 10px 5px black;
扫一扫
2846
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
