CSS样式

CSS样式

一、CSS的基础语法

CSS的基础语法为：选择器{属性1：值1；属性2：值2}
其中：width：宽
height：高
background-color：背景色

长度单位：
1.px：像素
2.%：百分比
外容器1：600px；当前容器 50%：300px
外容器2：400px；当前容器 50%：200px

二、CSS样式的引入方式

2.1内联（行内、行间）样式

内联（行内、行间）样式是在html标签上添加style属性来实现的。

2.2内部样式

内部样式是在<style>标签内添加的样式。其优点为：可以复用代码。

2.3内联样式与内部样式的区别

内联样式与内部样式的主要区别为：
内部样式的代码可以复用、符合W3C的规范标准，尽量让结构和样式分开处理。

三、外部样式

外部样式需要引入一个单独的CSS文件，就是 name.css；
可以通过link标签引入外部资源，rel属性为指定资源跟页面的关系，href属性为资源的地址。

四、CSS中的颜色表示

4.1单词表示法

使用单词表示法如：red、blue、green、yellow…

4.2十六进制表示法

十六进制表示法如：#000000（黑色）；#ffffff（白色）等等

4.3rgb三原色（red、green、blue）表示法

rgb三原色表示法：rgb（255，255，255）表示白色，其取值范围为0 - 255。

4.4获取颜色

在编写代码时，我们可能记住这些表示法太不方便了，因此我们可以通过寻找一些获取颜色的工具，如photoshop

五、CSS的背景样式

background-color为：背景色
background-image为：背景图
注：url为背景地址；默认的情况是会水平垂直都铺满背景图。
background-repeat为：平铺方式
其中：repeat - x：x轴平铺
repeat - y：y轴平铺
repeat：x，y轴都进行平铺，取默认值
no-repeat：都不平铺
background-position为：背景位置
x，y可以使用number（px，%）或单词，如：
x：left（左）、center（中）、right（右）
y：top、center、bottom（下）
background-attachment为：背景图随滚动条移动的方式
scroll：默认值为按照当前的元素进行移动的
fixed：背景位置是按照浏览器进行偏移的

六、CSS边框样式

border-style为边框样式的语法，其中：
solid：实线
dashed：虚线
dotted：点线
border-width为边框大小，其中可以是：
px（像素）…
border-color为边框颜色，其中：
red；#f00 等等

边框也可以针对某一边框进行单独设置：border-left-style；方向有：left、right、top、bottom
CSS的边框颜色可以设置成透明颜色，利用transparent则可以设置。

七、CSS文字样式

7.1字体类型

font-family为字体类型，其中包括：
英文字体：Arial，‘Times New Roman’
中文字体：微软雅黑（‘Microsoft YaHei’），宋体（SimSun）
注：对于字体有空格的需要加上引号。
衬线体和非衬线体；
需要注意的是：1.多个字体类型的设置目的
2.引号的添加目的

7.2字体大小

font-size为字体大小
默认值为：16px
写法为：number（px）；单词（small ，large…）不推荐使用

7.3字体粗细

模式：正常字体（normal）；加粗（bold）
写法：单词（normal，bold）或number（100 200 … 900，100到500都是正常的，600到900都是加粗的）

7.4字体样式

模式：正常字体（normal）；斜体（italic）
写法：单词（normal，italic），其中oblique也可以表示斜体，一般用的比较少
italic与oblique的区别：
1.italic带有倾斜属性的字体才可以设置倾斜操作。
2.oblique没有倾斜属性的字体也可以设置倾斜操作。

八、CSS段落样式

8.1文本装饰

text-decoration为文本装饰，其中：
1.下划线为：underline
2.删除线为：line-through
3.上划线为：overline
不添加任何装饰为：none
注：如果需要添加多个文本装饰：line-through underline overline

8.2文本大小写

text-transform为文本大小写（只针对英文段落）
小写：lowercase
大写：uppercase
只针对首字母大写：capitalize

8.3文本缩进

text-indent为文本缩进
首行缩进
em单位：为相对单位，1个em永远都是跟字体大小相同

8.4文本对齐方式

text-align为文本对齐方式
对齐方式有：left、right、center、justify(两端点对齐）

8.5定义行高

line-height为定义行高，通常一行文字的高度，上边距和下边距的等价关系。
默认的行高值不是固定的，而是变化的，是根据当前字体的大小再进行不断的变化。
其取值为：1.number（px）或scale（比例值，跟文字大小成比例关系）

8.6字体之间的间距

letter-spacing为字之间的间距
word-spacing为词之间的间距（针对的是英文段落）
对于英文和数字不自动折行问题：
1.word-break：break-all为非常强烈的折行
2.word-wrap：break-word为不是那么强烈的折行，会产生一些空白的区域

九、CSS复合样式

复合样式的写法，是通过空格的方式来实现的。复合样式的写法有的是不需要关心顺序，例如background、border，而有的是需要关心顺序的，如font。
1.background：red url() repeat 0 0；
2.border：1px red solid；
3.font：最少要有两个值：size，family（样式）
其中写法正确的有：weight style size family
style weight size family
weight style size/line-height family
一个CSS属性只能控制一种样式，叫做单一样式。
一个CSS属性控制多种样式，叫做复合样式。
注意：尽量不要混写，如果需要混写，那么必须要先写复合样式再写单一样式。

十、CSS选择器

10.1ID选择器

ID选择器写法为：
css：#elem{}
html:id = “elem”

注意：
ID是唯一值，在一个页面中只能出现一次，出现多次是不符合规范的
命名的规范，必须由字母，下划线，中划线，字母（并且第一个不能是数字）。
1.驼峰写法：searchButton（小驼峰）、SearchButton（大驼峰）、是。searchSmallButton（中驼峰）
2.短线写法：search-small-button
3.下划线写法：search_small_button

10.2CLASS选择器

CLASS选择器写法为：
css：.elem{}
html：class=“elem”

注意：
1.class选择器是可以复用的
2.可以添加多个class样式
3.多个样式的时候，样式优先级根据CSS决定，而不是class属性中的顺序
4.标签+类的写法，如p.box{background:red;}

10.3标签选择器（TAG选择器）

css：div{}
html：

<div></div>

使用的场景：
1.去掉某些标签的默认样式时
2.复杂的选择器中，如层次选择器

10.4群组选择器(分组选择器)

可以通过逗号的方式，给多个不同的选择器添加统一的CSS样式，来达到代码的复用

10.5通配选择器

*{ }：div，ul，li，p，h1，h2…{}
尽量避免使用通配选择器，因为会给所有标签添加样式，慎用
使用的场景：去掉所有标签的默认样式时

10.6层次选择器

后代 M N{ }
父子 M > N { }
兄弟 M ～ N{ } 为当前M下面的所有兄弟的N标签
相邻 M + N { } 为当前下面相邻的N标签

10.7属性选择器

M[attr] {}
=：完全匹配
*=：部分匹配
^=：开始匹配
$=：结束匹配
[] [] [] ：组合匹配

10.8伪类选择器

CSS伪类用于向某些元素添加特殊的效果，一般用于初始样式添加不上的时候，用伪类来添加。
M：伪类{}
:link 访问前的样式（只能添加给a标签）
:visited 访问后的样式（只能添加给a标签）
:hover 鼠标移入时的样式（可以添加给所有的标签）
:active 鼠标按下时的样式（可以添加给所有的标签）

注意：
1.link visited，只能给a标签加，hover和active可以给所有的标签加
2.如果四个伪类都生效，一定要注意顺序:L V H A
3.一般网站只这样去设置：a{}（link visited active） a:hover{}

CSS伪类选择器还有：
:after、:before 是通过伪类的方式给元素添加一段文本内容，使用content属性
:checked、:disabled、:focus 都是针对表单元素的

10.9结构性伪类选择器

nth-of-type() nth-child()
角标是从一开始的，1表示第一项，2表示第二项；n值表示从零到无穷大
first-of-type
last-of-type
only-of-type

nth-of-type()和nth-child()之间的区别
type为类型
child为孩子

十一、CSS继承

文字相关的样式可以被继承
布局相关的样式不能被继承，默认是不能继承的，但是可以设置继承属性，inherit值。

十二、CSS优先级

1.相同样式优先级
当设置相同样式时，后面的优先级较高，但不建议出现重复设置样式的情况
2.内部样式与外部样式
内部样式与外部样式优先级相同，如果都设置了相同样式，那么后写的引入3方式优先级高
3.单一样式优先级
style行间>id>class>tag>*>继承

注：style行间 权重为1000
id 权重为100
class 权重为10
tag 权重为1

4.!important
提升样式的优先级，非规范方式，不建议使用

5.标签+类与单类
标签+类>单类

6.群组优先级
群组选择器与单一选择器的优先级相同，靠后写的优先级就高

7.层次优先级
1.权重比较
ul little .box p input 1+1+10+1+1
.hello span #elem{} 10+1+100
2.约分比较
ul li .box p input{} li p input{}
.hello span #elem{} #elem{}