1，div与span标签
2.css基础语法
1.格式：选择器{属性1；值1；属性2；值2}
2长度单位：px→像素（pixel）、%→百分比
eg：
外容器1：→600px 当前容器50%→300px
外容器2→400px 当前容器50%→200px
3.基本样式：width 宽、height高、background-color背景颜色
4.css注释：跟html没有区别/* 知识的内容*/
3、内联样式与内部样式
css样式的映入方式
1.内联(行内、行间)样式
在html标签上添加style属性来实现的
2.内部样式
在*<style*标签内添加的样式
区别：内部样式的代码可以服用，符合w3c的规范标准，尽量让结构和代码分开处理。
4、外部样式：
引入一个单独的css文件，name，css
通过< ink>标签引入外部资源 rel属性指定资源跟页面的关系，href属性资源的地址
5.css中的颜色表示法
1.单词表示法：red、blue green yellow等等
2.十六进制表示法：0 1 2 3 4 5 6 7 8 9 a b c d e f
3.rgb（红绿蓝）三原色表示法：rgb（三色的取值范围）
取值范围：0~255
4.使用提取颜色的下载地址或者使用photoshop工具.
6.css中的背景样式.
1.background-color：背景颜色
2.background-image：背景图片
ur1（背景地址） 默认：会水平垂直都铺满背景图
3.background-repeat：背景图片的平铺方式
repeat-x
repeat-y
repeat(x，y都进行平铺，默认值)
no-repeat（都不平铺）
4.background-position：背景图片的位置
用法：x y ：number （px或%都可以）
或x：left，center，right
y：top，center，bottom
5.background-attachment：背景图随滚动条的移动方式
scroll：默认值（背景位置是按照当前元素进行偏移的）
fixed：（背景位置是按照浏览器位置进行偏移的）
加滚动条的方式：
7css边框样式
1.border-style：边框的样式
solid：实线
dashed：虚线
dotted：点线
2.border-width：边框的大小
3.border-color：边框的颜色 （透明颜色：transparent）
注：针对某一条边进行单独设置：border-left -style（中间是方向 left 、right、top、bottom）
8.css文字样式
1.字体类型
font-family：字体类型
eg英文字体: Arial , ‘Times New Roman’
中文字体:微软雅黑,宋体
<title>文字样式</title>
<style> #div1{font-family:"Times New Roman";} #div2{font-family:"方正舒体","宋体"}
</style>
</head>
<body>
<div id="div1">Arial</div>
<p>默认Arial</p>
<div id="div2">方正舒体</div>
<p>默认微软雅黑</p>
2.衬线体和非衬线体
注意事项：1.添加多字体 2.引入引号
3.字体大小粗细
1.font-size：字体大小
默认大小：16px
写法（一般设置成偶数）：div{font-size: 60px;}
2.font-weight：字体粗细
模式：正常（normal） 加粗（bold）
写法：单词（normal、bold）或者number（100~500都是正常的，600 ~900都是加粗的）div{font: weight bold/ 300px;}
3.font-style：正常（normal）斜体（italic）
写法：单词（normal、italic）
div{font-style:oblique；color：red}
9.css段落样式
1.text-decoration:文本修饰
下划线：underline
删除线：line-through
上划线：overline
不添加任何修饰：none
注：可添加多个文本修饰：通过空格隔开
写法： p{text-decoration: overline underline line-through;}
2.text-transform ：文本大小写（针对英文段落）
小写：lowercase
大写：upercase
之针对首字母大写：capltalize
写法： p{text-transform: uppercase;}
3.text-indent：文本缩进
首行缩进
em单位：相对单位1em永远都是跟字体大小相同。
写法：p{font-size:1em; text-indent: 25px;}
4.text-align：文本对齐方式
对齐方式：left，right，center，justify（两端点对齐）
写法：p1{text-align:right}
5.line-height：定义行高
一行文字的高度上边距和下边距是等价关系。
默认行高：不是固定值，而是变化的。根据当前字体的大小不断地变化
取值1.number（px）2.scale（跟文字大小的比例值）
写法：p{line-height: 30px;
6letter-spacing：定义字之间的间距
word-spacing：定义定义英文词之间的间距
强制折行：（针对英文）
若英文和数字不自动折行：
7word-break：break-all(强烈执行):
word-wran：break-word：会产生一些空白区域
写法：p{width: 330px; height:600px;border:1px solid;border-color:red; word-break:break-all}
10.css复合样式。
一个css属性值控制一种样式，叫做单一样式。
一个css属性控制多种样式，叫做复合样式。
复合的写法是通过复合的方式实现的
复合写法有的是不需要关心顺序的例如：background，border。有的是需要关心顺序的，例如：font（ *注：最少有两个值 size family * ）
1.background、border、font：
注意：font中size在family前面
weight style size family √
style weight size family √
weight style size/line- height family √
一般不要与单一样式混写，若非要混写则先写复合样式再写单一样式，防止样式被覆盖。
写法：div{width: 60px;height:60px; background:red url(../images/购物车.png)no-repeat center center border-right: 6px black dashed ;font:bold 30px 方正舒体 ;
展示：
11.css选择器
1.ID选择器：
css：#elem{ }
html：id=“elem”
注：1.id是唯一值，出现多次是不符合规范的
2.命名的规范，由字母、下划线、中划线、字母（并且第一个不能是数字）
3.命名方式：驼峰式写法：searchButton
短线写法：search-small-button
下划线写法：search_small_button
12.class选择器
.elem{ }
css：elem{ }
html：class=“elem”
注意1.class选择器是可可以复用的。
2.可以添加多个class样式。
3.多个样式的时候，样式的优先级根据css决定，而不是class属性中的顺序
4.标签＋类的写法
<style>
p.box{background:red}
.box{background:yellow}
</style>
</head>
<body>
<div class="box">这是一个块</div>
<p class="box">这是又一个块</p>
<div class="box">这又又是一个块</div>
</body>
展示：
13.标签选择器（TAG选择器）
div{ }
< div>< /div>
使用的场景:
1.去掉某些标签的默认样式时
2.复杂的选择器中，如层次选择器
14.群组选择器（分组选择器）
可以通过逗号的方式，给多个不同的选择器添加统一的css样式，来达到代码的复用。
15.配速选择器
*{ } -> div,ul,li,p,h1,h2…{}
注:尽量避免使用通配选择器，因为会给所有的标签添加样式，慎用。
使用的场景:
1.去掉所有标签的默认样式时
16.层次选择器
后代： M N( ) ul li{border:1px red solid;}在这里插入代码片
父子： M>N #list >li{border:1px red solid;}
兄弟 ： M~N div~h2{background: red;}当前M下的所有兄弟N标签
相邻：M+N{}div+h2{background: red;}
当前 M下面相邻的N标签
17.属性选择器
M[attr]{ }
= ：表示部分匹配
*=：完全匹配
^=:起始匹配
$=:结束匹配
div[class$=search]{background-color: red;}
......
<div>aaaaa</div>
<div class="box-search">bbbbb</div>
<div class="search-box">ccccc</div>
18.伪类选择器
1.css伪类用于向某些元素添加特殊的效果。一般用于初始样式添加不上的时候，用伪类来添加。
写法：M：伪类{ }
：link 访问前的样式（只能添加给a样式）
：visited 访问后的样式（只能添加给a样式）
：hover 鼠标移入时的样式（可以添加给所有样式）
：active 鼠标按下时的样式（可以添加给所有样式）
注:
- link visited只能给a标签加, hover和active 可以给所有的标签加。
2.如果四个伪类都生效,一定要注意顺序: LV H A。
3.一般网站只这样去设置: a{} a:hover{}.
写法：
`a{color: gray;}
a:hover{color:red}`
.....
`<a href="">这是一个链接</a>`
展示：
2.：after、:before通过伪类的方式给元素添加一段文本内容。使用content属性
写法：
div:after{content:"world"；color:red;}
...
<div>hello</div>
3.：check、：disabled、：focus 都是针对表单元素的
:disabled{width:100px;height:100px}
......
<input type="text" disabled>
<input type="text">
<input type="text">
4.结构性伪类编辑器
：nth-of-type()、:nth-child()
角标是从1开始的，1表示第一项，2表示第二项
除此之外还可以取n值：表示从0到无穷大(2n表偶数)
li:nth-of-type(3){background-color: red;}
......
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
:first-of-type（）、:first-shild 第一个被标注样式
last-of-type（）、：last-child 最后一个被标注样式
:only-of-type（）、:only-child 只有一个才生效
1190
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
