-
内部与内联样式
内部样式：style属性 <div style="background-color: aquamarine;">adfjk</div> 内联样式：style标签 <style> #div2{ background-color: #000000; } </style> 外部样式： <link rel="stylesheet" href="./common.css"> <style> @import url('./common.css'); //不推荐 </style> 内部样式和外部样式优先级相同，如果设置了相同样式，那么后写的引入方式优先级高 单一样式优先级： style内联样式 > id > class > tag > * > 继承 权重：1000 100 10 1 标签类型划分：布局一般用块标签，修饰文本一般用内联标签 block:块 独占一行 支持所有样式 不写宽的时候，跟父元素的宽相同 所占区域是一个矩形 inline:内联 a span img(是替换元素，支持宽高设置) 挨在一起 有些样式不支持：width height margin padding 不写宽的时候，宽度由内容决定 所占区域不一定是矩形 内联标签之间会有空隙，产生原因：换行产生的 inline-block:内联块 input 标签内容划分： !important: 提升样式优先级，不建议使用 标签+类 > 单一 div .box{ color:blue; } div{color:red;} 盒模型： content -> padding -> border -> margin 物品 填充物 包装盒 盒子与盒子之间的间距 （width，height） 内填充 背景颜色会填充到margin以内的区域 文字会在content区域 padding不会出现负值，margin是可以出现负值 问题解决： 1） margin重叠 上下两个元素这是margin会出现叠加的问题（只存在上下，不存在左右）,会取上下中值较大的作为叠加的值 解决方案： 1. bfc规范 2. 只给一个元素添加间距 2）margin传递 嵌套的结构中，margin-top会有传递的问题 <div class="box1"> <div class="box2">段落</p> </div> .box2{margin-top: 100px;} box1和box2一块往下移动 解决方案： 1）BFC规范 2）给父容器加边框 3）margin换成padding 3）居中 margin-left:auto;//盒子会靠右显示 margin-right:auto;//盒子会靠左显示 margin:auto; //居中显示 width height 不设置的时候，会自动计算容器的大小，节省代码 4）span标签之间有空隙 解决方案： 父级元素加:font-size:0 span标签加：font-size:16px <style> div{font-size: 0;} span{font-size: 16px;} #content1{background-color: red;} #content2{background-color: blue;} </style> <div> <span id="content1">内联1内联1内联1内联1内联1内联1内联1内联1内联1内联1</span> <span id="content1">内联1</span> </div> -
颜色
单词： red blue 十六进制：#ffffff rgb： rgb(255,255,255) 拾色工具：fehelper ps -
背景样式
background-color: #000000; background-image: url('./'); background-repeat: repeat-x; //平铺方式 background-position: top bottom; //图片位置 background-attachment: fixed; //背景图随滚动条的移动方式 fix容器滚动，背景图不动 scroll:背景位置是按照当前元素进行偏移 fixed:背景位置是按照浏览器进行偏移 background-image: url(./icon.png); width: 300px; height: 300px; background-repeat: no-repeat; background-position: -90px 10px; background-position: center center; background-position: 50% 50%; background-color: #000000; background-attachment: fixed; background: red url(./1.png) no-repeat center center; 复合会把单一覆盖 先复合再单一 -
边框样式
border-style:solid dashed dotted boder-width boder-color: transparent border-left-style: -
字体
font-family: 华文彩云，'Times New Roman', Simsun, 微软雅黑; //字体含有空格需要用引号
font-size: 16px; //不建议用奇数 数字|字母（medium等）
font-weight: normal|bold|number(100-500:nomal 600-900 bold);
font-style:italic|normal;
color:red;
复合写法：
font:30px 宋体
至少要有 size family （有顺序要求）
weight style size family
style weight size family
weight style size/line-height family
6. 文本修饰
text-transform:lowercase|uppercase|capitalize;
text-decoration: underline|overline|line-through|none;
7. 段落样式
首行缩进两个汉字：
text-indent:36px; font-size:18px;
1em始终等于字体大小，此处1em=18px
text-indent:2em;
text-align:left|justify
8. 行高
line-height: 上边距+字体+下边距 （上边距=下边距）
line-height:32px|2; font-size:16px;
2此处指2倍行高
9. 文本间距
letter-spacing: 10px; 字之间的间距
worder-spacing:10px (英文才有效); 词之间的间距
英文和数字不自动折行
word-break:break-all （强烈的折）
word-wrap:break-word （不强烈的折行，会出现空白问题, 长字符单词会整个在下一行显示）
9. 层次选择器
M N: 后代（包括所有子孙后代）
M>N:父子（只是父子）
M~N：当前标签下面的所有兄弟
div~h2{
color: red;
}
<div>div</div>
<p>p</p>
<h2>h2</h2>
<h2>h2</h2>
<h2>h2</h2>
M+N：相邻(只会找当前标签下面相邻的兄弟)
10. 属性选择器
```
1) M[attr]: 选择所有带有attr属性元素
a[target]
{
background-color:yellow;
}
<a href="//www.w3cschool.cc">w3cschool.cc</a>
<a href="//www.disney.com" target="_blank">disney.com</a>
<a href="//www.wikipedia.org" target="_top">wikipedia.org</a>
2) M[attr=value]: 选择所有使用target="-blank"的元素
a[target=_blank]
{
background-color:yellow;
}
3) M[attr*=value]: 选择每一个src属性的值包含子字符串"runoob"的元素a[src*="runoob"]
div[class*="test"]
{
background:#ffff00;
}
<div class="first_test">这是第一个 div 元素。</div>
<div class="test">这是第三个 div 元素。</div>
4)M[attr^=value]: a[src^="https"]选择每一个src属性的值以"https"开头的元素
div[class^="test"]
{
background:#ffff00;
}
5) M[attr$=value]: 结尾
div[class$="test"]
{
background:#ffff00;
}
6) M[attr1][attr2]:
div[class][id]:div标签中含有这两个属性的标签
```
11. 伪类选择器
```
M:伪类{}
a:link 访问前
a:visited 访问后
:hover 鼠标移入
:active 鼠标按下
如果四个伪类都生效，需要注意添加顺序： L V H A
a{color:gray}
a:hover{color:red}
a:active
{
background-color:yellow;
}
div:hover{
background-color:yellow;
}
div:active{
background-color:yellow;
}
div:hover{
background-color:yellow;
}
```
12. :after :before
```
通过伪类的方式给元素添加文本内容
清浮动 精灵图标 部分文字改变颜色 列表图标
用法：
https://www.cnblogs.com/liAnran/p/9714040.html
```
13. [:checked]
[:disabled]
[:focus]
```
input:checked
{
width:100px;
height:200px;
}
:checked
{
width:100px;
height:200px;
}
:focus{background:red;}
<form action="">
<input type="radio" checked="checked" value="male" name="gender" /> Male<br>
<input type="radio" value="female" name="gender" /> Female<br>
<input type="checkbox" checked="checked" value="Bike" /> I have a bike<br>
<input type="checkbox" value="Car" /> I have a car
</form>
```
14. 结构类选择器
```
:first-of-type
:last-of-type
:only-of-type
:nth-of-type(n) ： 从1开始
li:nth-of-type(n+2){ //n: 从0到无穷大
background-color: red;
}
li:last-of-type{
color:blue;
}
li:first-of-type{
color:rosybrown;
}
<ul>
<li>fdfjkj</li>
<li>fdfjkj</li>
<li>fdfjkj</li>
<li>fdfjkj</li>
<li>fdfjkj</li>
</ul>
li:only-of-type{
color:blue;
}
<ul>
<li>fdfjkj</li>
</ul>
:nth-child(n)
:first-child
:last-child
:only-child
li:first-child{
background-color: red;
}
```
15. 样式继承
```
文字相关的样式可以被继承
布局相关的样式：默认不会被继承，但可以设置inherit属性
div{border:1px solid red;}
p{border:inherit;}
<div>
<p>段落</p>
</div>
```
