css重要属性

@CSS笔记

html css javascript
语法:1.属性名和属性值之间使用 : 隔开
2.多对属性之间使用;隔开
3.最后一对属性可以不加分号
共有属性： id style=“根据css语法进行设置” class title width:100px;
速记写法：简写形式：
div
盒子：内容区＋内边距+外框+外边距
padding-left:10px; margin-left:10px;
padding-right:10px;
padding-top:10px;
padding-bottom:10px; 简写：padding:10px; 上下左右均为10px
padding:10px 20px;//上下 左右
padding：10px 20px 30px;//上 左右 下
padding: 10px 20px 30px 40px;//上 右 下 左
margin同上
border:1px solid red;
border-width
borderstyle
border-color
3.注释 css/**/ 1.解释说明 2.便于代码的维护和管理
3.注释不可以嵌套使用上一个标签的头嵌套解析会以中间标签的尾结束
html可以嵌套但不能交叉嵌套
div{
width:100px;
height:100px;background-color:red
}
p{
width:50px;
height:50px;background-color:red
}

html中引入css方式：1.行内样式 style属性 2.内联样式 style标签设置样式 3.外部引入 创建一个以.css为后缀名文件 link 标签 优先解析css @import url（）css语法 不建议使用 优先解析html 引入方式的优先级： 行内样式>内联/外部引入 谁更靠近DIV 内联样式： 外部link标签 做实际开发 1.选择器 标签选择器： 根据标签名称去选择一类元素 2.id选择器 通过id'属性选择一个元素 #value 3.类选择器：class .value 4.普遍选择器：*：所有 5.后代选择器： >:选择当前元素直接子元素 空格:选择当前元素的所有后代元素，包含孙代元素 6.兄弟选择器： +：选择当前元素之后的一个兄弟元素 ~：选择当前元素之后的所有兄弟元素 7.属性选择器： 根据元素的一个属性去选择一类元素 [id]:选择当前页面中具有id属性的元素 [class="one"]:选择当前页面中具有class属性并且属性值为one的元素 [class~="one"]:选择当前页面中具有class属性并且属性值之一为one的元素 [class^="o"]:选择当前页面中具有class属性并且属性值以o开头的 [class$="o"]:选择当前页面中具有class属性并且属性值以o结尾的 [class*="o"]:选择当前页面中具有class属性并且属性值中包含o字符的 8.多选择器： 使用逗号隔开多个选择器 div*5 p*3 div{ width="100px; height="100px";} p{ width="100px; height="100px";} div,p{ width="100px; height="100px";} #one,p.two{

}

9.组合选择器
将多个选择器组合到一起使用
div#one：选择当前页面中所有的div标签并且选择div标签中id为one的元素

10.伪类选择器：
:伪类名称-first-child last-child nth-child (number/odd/even)
11.和状态相关的
：hover：当鼠标悬停在某个元素上时触发
：avtive：当鼠标按下时的状态
：link ：当当前元素未被点击过的状态
：visited：当前元素被点击过的一个状态（被访问过的状态）
书写顺序：link visited hover active
12.伪元素选择器：
::first-letter:第一个字符
::frist-line：第一行
::frist-selection:被选择文本
::before
content：‘text’/url() 如何将行内变块级元素？
::after
选择器优先级：
根据特性值进行比较，特性值越大，优先级越高、当特性值相同越靠下优先级越高。
！important：不计入特性值 优先级最高，不建议经常使用，
style属性：1000
id 选择器：100
类选择器/伪类选择器/属性选择器：10
元素选择器/伪元素选择器：1

1.选择到div 2.设置样式 颜色单位： 1.关键字 2.rgb（r，g，b）三原色 ；0-255之间 3.rgba(r,g,b,a透明度)；a：0-1取值；0代表完全透明 1代表完全不透明 4.16进制颜色值 #fff #ccc 取色器/拾色器 尺寸单位： 1.px像素值 2.em单位 相对单位 默认1em=16像素 rem 3.%百分比，相对单位

斜体：i标签 font-style：italic斜体 ：normal正常体 改变字 C：/windows/Fonts 加载网络字体 1.下载字体 2.声明出来 3.使用字体

字体图标：
hello
fontawsome
iconfont

outer.css：

html：

保留用户所输入的格式

盒模型：
标准盒模型/w3c/默认盒子模型
box-sizing：content-box
特点：
width–>content
边框/怪异盒模型：
box-sizing：border-box
特点：
width-盒子
border：
border-radius：20px 50%
border :1px solid red
border-image-source:url()
border-image-slice:number: 注意不加单位 默认单位px
border-image-repeat:
spacing round
表格：tr父辈tbody
盒模型：
标准盒模型/w3c/默认盒子模型
box-sizing：content-box
特点：
width–>content
边框/怪异盒模型：
box-sizing：border-box
特点：
width-盒子
border：
border-radius：20px 50%
border :1px solid red
border-image-source:url()
border-image-slice:number: 注意不加单位 默认单位px
border-image-repeat:
spacing round
表格：tr父辈tbody
盒模型：
标准盒模型/w3c/默认盒子模型
box-sizing：content-box
特点：
width–>content
边框/怪异盒模型：
box-sizing：border-box
特点：
width-盒子
border：
border-radius：20px 50%
border :1px solid red
border-image-source:url()
border-image-slice:number: 注意不加单位 默认单位px
border-image-repeat:
spacing round
表格：tr父辈tbody
盒模型：
标准盒模型/w3c/默认盒子模型
box-sizing：content-box
特点：
width–>content
边框/怪异盒模型：
box-sizing：border-box
特点：
width-盒子
border：
border-radius：20px 50%
border :1px solid red
border-image-source:url()
border-image-slice:number: 注意不加单位 默认单位px
border-image-repeat:
spacing round
表格：tr父辈tbody