样式写法
外部样式引用
导入式引用CSS文件
他们四者的区别
这几个写法的优先级，简单记就是：离标签最近的先显示。
类选择器：class
用来给想要改变样式的标签。
class=""在<style>标签里面对应：.{}
类选择器可以在HTML页面多次调用。
想给标签只用两个类选择器,class中间加空格
ID选择器
同一个ID选择器在CSS样式设置时，可以被多次使用。而且同一个网页文档中ID是唯一。
ID=""在<style>标签里面对应：#{}
class和ID的值区分大小写。
全局选择器：
*{
CSS样式;
}
群组选择器：
p,#name,.name2,p.name2{
CSS样式;
}
后代选择器
使用后代选择器要用空格，隔开。
image.png
伪类：
链接伪类
伪类:hover和:active
1.:hover用于访问的鼠标悬停于某个元素时
2.:active用于一个元素被激活时（即按下鼠标之后到放下鼠标之前的时间）
链接伪类的顺序:link>visited>hover>active
说明：伪类名称对大小写不敏感。
CSS层叠：
可以定义多个样式。不冲突时，多个样式可重叠成一个。冲突时，按不同样式规则优先级来应用样式。
继承的好处：
父元素设定样式，子元素继承部分属性。
减少CSS代码。
css优先级：
ID选择器>class选择器>标签选择器
同类样式多次引用时，样式表中后定义的优先级高。
按权值判断优先级：
标签选择器权值：1
类选择器和伪类：10
ID选择器:100
通配符选择器：0
行内样式：100
在css选择器里写上：!important意思该选择器优先级是最高的。
CSS字体属性
字体类型：font-family
ps：可以给一段文字设置多个字体类型，浏览器会一次查找，如果都没有，则使用浏览器默认样式。如果写在style里面出现“”双引号嵌套，那么内部的双引号改成单引号。
文字大小：font-size
ps：文字大小的px单位由电脑的分辨率所影响。
文字颜色：color
ps：1，具体颜色名； 2，红绿蓝rgb（，，）数字：0-255，百分比0%-100% ；3，十六进制：#******，*是0-F如#080是#008800的简写；
文字粗细：font-weight
ps：1，可以使用HTML标签来加粗文字，如<b><strong>2，通过css语法：font-weight：normal|bold|bolder|lighter|100-900(400等同于normal，700等同于bold)
文字样式：font-style
ps：1，HTML中用<em>,<i>做斜体2，css里italic表示字体样式为斜体
font简写
如果font-family的值有多个时，值用逗号分开。
文本对齐方式
text-align
语法：text-align：left|right|center|justify（该属性仅对块级元素设置有效）
对于行内元素可以在外边嵌套一个div来解决，给div一个text-align；
居中还有一个方式：margin：0 auto；
ps：给p标签文本设置首行缩进两个字：text-indent:2em;
line-height：行高
可以用%来表示，代表是字体大小的%。
或者em，和px；关于继承em，在父标签算的em对应的px数直接继承，而不是继承em。
vertical-align
只有运用到行内标签和单元格才起作用。
语法;vertical-align:baseline | sub | super | top | text-top | middle | bottom | text-bottom | 长度 | 百分比
图解
多行垂直居中：在父级标签display：table；
word-spacing
单词之间的间距
letter-spacing
每个字或者字母之间的间距
text-transform
设置元素内文本大小写
capitalize（设置首字母大写）| uppercase （将字母设置成大写）| lowercase（将字母设置为小写）| none（没有任何的设置效果）
text-decoration
underline （下划线）| overline（上划线） | line-through （贯穿线）| blink（闪烁） | none（没有任何的设置效果）
盒子模型
外边距（margin）：是元素与元素之间的距离，或者是元素外面留出的一段空白
内边距（padding）：元素里的内容与元素边框之间的距离
边框（border）：元素本身
内容（content）：元素中放置的东西，元素的宽和高指的是元素中内容的宽和高，并不是元素本身的宽和高
height和width属性总结：
1.二者设置的是内容的宽和高
2.二者设置对块级元素和替换元素有效
3.max-height/min-height有兼容性问题，IE浏览器不支持。
ps：当一个元素同时设置 max-height和min-height，max-height值小于min-height值，最大高度自动转换成最小高度的值，所以显示min-height值。
块级元素有：<p>、<div>、<dl>、<ul>等
替换元素有：<img>、<input>、<textarea>等
border边框
border-width：thin|medium|thick|长度值
border-color：颜色|transparent（透明度）
border-style：边框的样式值（double定义双线边框；dotted定义点状边框；dashed定义虚线边框；solid定义实线边框）
简写：border（-left|-top|-right|-bottom）：宽度 颜色 样式；
padding内边距
4种设置方法：
1：padding：值（上下左右）
2：padding：值1 值2 （上下 左右）
3：padding：值1 值2 值3 （上 左右 下）
4：padding：值1 值2 值3 值4（上 右 下 左）
margin外边距
在垂直方向，两个相邻元素都设置外边距，外边距会发生合并。合并后外边距高度=两个发生合并外边距的高度中最大值。
块级元素居中：margin：0 auto；
p标签内文字居中用：text-align：center；
ps：在块级标签中的style里加上display：inline；可以变成内联元素，元素前后没有换行符。或者，在行内标签的style里加上display：block，将显示为块元素，元素前后会带有换行符；行内块元素，设置一个display：inline-block，元素呈现为inline，具有block相应特性。
ps：行内元素无法设置宽和高，外边距只能设置左右的，无法设置上下的。
背景
background背景缩写，各个值之间用空格分隔，不分前后顺序。
背景样式：
background-color：设置元素的背景颜色。
background-image：把图像设置为背景
background-position：设置背景图像的起始位置
ps;百分比|值|top|right|bottom|left|center
background-attachment：背景图像固定或者随页面滚动。
ps：scroll：默认值，背景图片随滚动条滚动；fixed当页面的其余部分滚动时，背景图片不会滚动。
background-repeat：设置背景图像是否重复以及如何重复。
ps:repeat重复，no-repeat不重复，repeat-x水平重复，repeat-y垂直重复；并且该语句必须在有图片的情况下有效。
列表样式
list-style-type：设置列表项标志的类型；
无序列表和有序列表的类型
1、无序列表none无标记 | disc实心原点 | circle空心圆点 | square实心方块
2、有序列表none无标记 | decimal从1开始的整数 | lower-roman 小写罗马数字| upper-roman 大写罗马数字| lower-alpha 小写英文字母| upper-alpha大写英文字母
list-style-image：将图像设置为列表项的标志。
list-style-position：设置列表中列表项的位置。
有inside和outside
inside
outside默认值
list-style：简写属性，把所有列表属性用于一个声明中。
float浮动
行内元素和块级元素的一些规则
行内元素
1.与其他元素同行显示
2.不可以设置宽高
3.宽高就是文字或者图片的宽高
4.span、a、b、i、em、u
块级元素
1.独占一行
2.可以设置宽高
3.如果不设置宽度，宽度默认为容器的100%
4.div、p、h1-h6、ul、ol、li、dl、dt、dd
两个div方块放置在一行，给两个div都加上一个float：left；
用clear：both；清除所有浮动；
1、在一排加了浮动的div后，写一个空格div，给它一个clear：both;就会清除这一排的浮动；
2、子元素加了浮动之后，在他们的父标签写上：overflow：hidden；zoom：1；//兼容IE浏览器
position定位属性
position：static；静态定位；自然定位；
能够忽略相对定位对它的影响。
position：relative；相对定位
ps：相对定位的元素绝对不会离开常规流（心念家乡），并且可以使浮动的元素发生偏移控制他们的堆叠顺序。任何元素都可以设置为relative，它的绝对定位的后代都可以相对于它进行绝对定位。
position：absolute；绝对定位
ps：1、脱离常规流：使用top，left，right，bottom来改变它相对于祖先的位置。
2、如果没有给绝对定位的块设置祖先（position：relative），那么它会默认自己的祖先是body。
3、给绝对定位的块设置top：0；bottom：0；left：0；right：0；margin：auto auto；能够实现块在父块的中心，上下居中，左右居中。如果设置left：0；right：0；margin：0 auto；那么相当于设置了水平居中。
position：fixed；固定定位
ps：相对于肉眼可见的视图窗口的位置。随着窗体的滚动，固定定位的块还是在看得到的那个相同的位置。
position：sticky；吸附定位
ps：如果做一个导航栏，让他随着鼠标的滚动，一直吸附在窗体头部，代码：
position:sticky;
top:0;
有脱离以及吸附。
hover里可以加改变鼠标形状的代码：
cursor:pointer;
把鼠标原本显示的样式箭头，变成小手。
网友评论