CSS

css：层叠样式表，用于控制网页中的样式显示，一般css样式作用在标签上。所有的HTML标签默认是没有样式的，但a、h等默认是浏览器添加的样式。

内联样式

在标签的开始标签里面添加style属性，属性值中书写css样式代码。
语法：

<p style="css1:1,css2:2"> </p>

好处：哪里需要就在哪里添加。
缺点：多个元素有相同的样式时，需重复书写。

内部样式

在head标签中添加style标签，借助选择器来书写css代码。
选择器：可以定位到页面中指定的标签，选择器有很多种。
标签选择器：直接使用标签名作为选择器。
好处：
结构和样式分离；
结构清晰，有利于后期代码维护；
可以批量设置选中的标签样式。
缺点：结构和样式完全分离，目前还在一个文件中。

外部样式

先创建一个后缀名为.css的文件，在里面通过选择器书写css样式代码，再在head标签中通过link标签引入css样式文件。

<link rel="stylesheet" href="index.css">

好处：
样式和结构代码完全分离；
以后维护代码时，可以一处处修改；
可以将外部css文件进行压缩，减少文件体积。
相同选择器时的优先级（权重大小）：内联>内部/外部；（内部和外部采用就近原则，离标签近的优先）
优先级：相同选择器，内联样式权重最大，内部样式和外部样式采用就近原则，相同的选择器同时作用在一个标签上，后面的样式会盖住前面的样式。

选择器

标签选择器

通过标签名找到指定的标签。

类选择器（class选择器）

通过标签上的class名找到对应标签。
不同类型的标签可以提取公共样式。
如果标签上作用多个类选择器的样式，可以设置多个class名，中间使用空格隔开。
相同选择器后面的样式会盖住前面的样式。
选择器中间没有空格，代表并且的意思。

id选择器

通过标签上id名找到指定的标签。
id是唯一的，只能找到页面中唯一的标签。
优先级：id选择器>类选择器>标签选择器

背景样式

border：1px solid red；(solid：实线)
边框宽度类型颜色
background-repeat:repeat;
设置图片是否平铺，repeat：默认值，x轴和y轴平铺;三种属性：repeat-x、repeat-y、no-repeat。
应用场景：可以实现1px渐变背景平铺，减少图片体积，从而优化网页。
background-position:（设置背景图片的位置）
属性：left、right、center、top、bottom（两两搭配使用）
x轴和y轴：像素，默认位置0px、0px/百分比，50%，50%相当于center、center。
background-size:(设置背景图片大小[css3中提出])
contain：一边铺满，另一边不管；
cover：两边都铺满，超出部分隐藏；
x轴、y轴：宽度、高度（如设置两个值，图片可能变形，设置一个代表宽度，设置百分比分别参考盒子宽度和高度）
background-attachment:(设置背景图片是否固定[css3中提出])
scroll：默认值，图片会随滚动条滚动。
fixed：背景图片固定再页面上。
复合属性：前面代表位置，后面代表大小。

精灵图应用

精灵图：将多张图片组合在一起，形成一张图片，减少请求服务器的次数，从而优化网页。
:hover：鼠标移入标签时作用的样式，原来标签上的样式依然保留，更改或添加样式。
原理：通过背景样式background-image和background-position来实现。
步骤：
(1)设置一个宽高刚好显示指定图标大小的标签。
(2)通过background-image引入精灵图。
(3)通过background-position设置图的显示位置，调整到指定位置。
在开发中，x轴正方向是水平向右，y轴正方向是垂直向下。

文本样式

设置文本对齐方式
text-align:center
left:左对齐；center:居中；right:右对齐；
设置行高、像素、设置百分比和数字都是参考字体大小的倍数。
line-height:100px; 设置字体大小
font-size:20px;
针对单行文本水平垂直居中，可以设置text-align:center；line-height为盒子的高度。
设置文本的修饰
text-decoration:underline;
underline:下划线；line-through:删除线；overline:上划线；none:无；
设置字符间距
letter-spacing:20px;
一个中文就是一个字符，一个字母就是一个字符。
设置字间距(以空格为参考)
word-spacing:100px;
取消a标签默认的下划线
text-decoration:none;
设置首行缩进
text-indent:50px;
设置英文字母大小写
text-transform:uppercase;
capitalize:首字母大写;uppercase:全大写;lowercase:全小写;
设置文本方向
direction:rtl;
ltr:从左向右；rtl:从右向左；

CSS常用属性(1)

CSS