@
全称 : Cascading Style Sheet 级联样式表 (层叠)
作用 : 定义如何显示 HTML 元素
出现的原因 : 解决内容与表现分离的问题
<table bgcolor="#FFB36D" align="center"
border="1px" bordercolor="#3F3F3F"
cellspacing="0"
width="350px" height="400px">
<tr>
<td colspan="5" bgcolor="blue">11</td>
<td colspan="2" rowspan="2">16</td>
</tr>
</table>
<!-- 想要达到的效果 -->
<table >
<tr>
<td >11</td>
<td >16</td>
</tr>
</table>好处 : 外部样式表可以极大提高工作效率
选择器{
声明1:值;
声明2:值;
}
最后一个; 可以省略,但是按照规范最好写上<h3 style="color : green ; font-size: 30px">标题3</h3><hred>
<style type="text/css">
h1{
color : red;
}
h2{
color: blue;
font-size: 50px;
}
</style>
</head>
<body>
<h1>标题1</h1>
<h2>标题2</h2>
</body><link rel="stylesheet" href="style.css" type="text/css">就近原则
行内优先级 > 内部样式优先级 > 外部样式优先级
<h3>望庐山瀑布</h3>
<p>日照香炉生紫烟，</p>
<p>遥看瀑布挂前川。</p>
<p>飞流直下三千尺，</p>
<p>疑是银河落九天。</p>p{color:red}<p class="green">日照香炉生紫烟，</p>
.green{color:green}<p id="pid">日照香炉生紫烟，</p>
#pid{color:green}标签选择器直接应用于HTML标签
类选择器可在页面中多次使用 ,一个标签可以同时添加多个类
ID选择器在同一个页面中只能使用一次
Id选择器 > 类选择器 > 标签选择器
三种选择器的顺序 不遵循就近原则
案例的初始化
<body>
<div> 11111
<p class="son">4444</p>
</div>
<br>
<div>2222
<p class="son">5555</p>
</div>
<br>
<div> 3333
<p class="son">6666</p>
</div>
<p >6666</p>
<p >6666</p>
</body><style>
div{
width: 100px;
height: 100px;
}
p{
width: 50px;
height: 50px;
}
</style>/* body p 后代元素选择器 包括儿子 儿子的儿子 ... */
/* body>p 子代选择器 只有直接子标签 */
/* div+p 相邻兄弟 紧挨着div的p 标签 两个标签是同级关系*/
/* div~p 通用兄弟 紧挨着div 之后的所有p 标签 两个标签是同级关系*/案例初始化
<body>
<p>111</p>
<p>222</p>
<p>333</p>
<ul>
<li>
<p>444</p>
</li>
<li>
<p>555</p>
</li>
<li>
<p>666</p>
</li>
</ul>
</body>/* ul li:first-child ul标签中第一个子元素li 要求li必须出现在ul的第一个子元素位置*/
/* ul li:last-child ul标签中最后一个子元素li*/
/* li p:nth-child(1) li 标签中第一个出现的p标签
p:nth-child(1) 如果不设置父元素 在整个网页中 p第一次作为子元素出现的位置*/
/* p:first-of-type 选择父元素内第一次出现的p标签 ,并不要求p在父元素的第一个位置
p:last-of-type
p:nth-of-type(n)*/用户 <input type="text" name="username"> <br><br>
密码 <input type="password" name="userpassword"> <br><br>
邮箱 <input type="email" name="email"> <br><br>
电话 <input type="text"> <br><br>
地址 <input type="text"> <br><br> input[name] 选中拥有name属性的标签
input[name="email"] 选中 name属性 为email 的标签
input[name^="user"] 选中 name属性 以user为开头的 的标签
E[attr$=val] 选中 属性 以val结尾的 的标签E
E[attr*=val] 选中 属性 包含val的 的标签E<p>111</p>
<p class="red">222</p>
<p>333</p>
<h1 class="red">hhhh</h1>
<h1>hhhh</h1>
<h1>hhhh</h1>p,h1 (逗号连接)所有的p 和所有的 h1都可以使用该样式p.red (中间没有任何空隙)当标签为p 并且class属性为red的时候才满足条件a:link 默认状态
a:hover 鼠标指向
a:active 鼠标按下(不松手)
a:visited 鼠标抬起(访问过后)
问题: a:visited 放到最后 鼠标指向hover失效问题,
只需要把 a:visited 移到鼠标指向hover之前 选择器 权重
!important Infinity
行间样式 1000
id 100
class/属性/伪类 10
标签/伪元素 1
通配符 0background 简写属性，作用是将背景属性设置在一个声明中。
background-attachment (scroll , fixed)背景图像是否固定或者随着页面的其余部分滚动。
background-color 设置元素的背景颜色。
background-image (url(""))把图像设置为背景。
background-position (设置不重复 值可以是单词,像素,百分比 )设置背景图像的起始位置。
background-repeat (repeat,no-repeat,repeat-x,repeat-y)设置背景图像是否及如何重复。 background-size
可能的值
length 第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为 auto(自动)
percentage 相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置的高度
cover 此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。
contain 此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。 background : skyblue no-repeat url("2.jpg") center center ;线性渐变 Linear Gradients 向下/向上/向左/向右/对角方向
background: linear-gradient(direction 方向, color-stop1, color-stop2, ...);
direction 方向 可以是自定义角度 45deg 90deg渐变色 支持透明度
background: linear-gradient(90deg ,rgba(0,0,255,0),rgba(0,0,255,1));径向渐变（Radial Gradients）- 由它们的中心定义
background: radial-gradient(red, green, blue); /* 标准的语法 */
// 设置 正圆形 circle 椭圆ellipse
background: radial-gradient(circle, red, yellow, green); /* 标准的语法 */font-style
normal
italicfont-weight
bold 定义粗体字符。
bolder 定义更粗的字符。
lighter 定义更细的字符
100 - 900简写属性
可以按顺序设置如下属性：
font-style
font-weight
font-size/line-height
font-family
font:italic bolder 40px 宋体;span 只是作为一个容器存在 text-indent 缩进
2em 当前文本的 大小单位text-decoration 装饰
none 默认。定义标准的文本。
underline 定义文本下的一条线。
overline 定义文本上的一条线。
line-through text-shadow 文本阴影
text-shadow:10px 10px 1px blue;
水平阴影，垂直阴影，模糊的距离，以及阴影的颜色：| list-style | 简写属性。用于把所有用于列表的属性设置于一个声明中。 |
| list-style-image | 将图象设置为列表项标志。 |
| list-style-position | 设置列表中列表项标志的位置。 |
| list-style-type | 设置列表项标志的类型。 |
list-style-position 演示 给li添加背景颜色
inside 列表项目标记放置在文本以内，且环绕文本根据标记对齐。
outside 默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。 list-style: circle inside url("a.png");没有大小, 没有颜色 一个盒子
border-color : red blue green pink;
/* 从上开始 顺时针 上 右 下 左
如果只有三/两个颜色 red blue green 对边相同
如果只有一个颜色 四个边全相同border-width
border-style
| style 选项 | |
|---|---|
| none | 没有边框 |
| hidden | 隐藏边框 |
| dotted | 点状线 |
| dashed | 虚线 |
| double | 双线 |
| solid | 实体线 |
简写属性
border:blue 2px solid; /* (顺序可调整)margin 盒子与盒子(没有包含关系)之间的边距
如何快速创建 带有类名或id名的div块margin-top / right / bottom / left细节问题
<div class="a"></div>
<div class="b"></div>
.a,.b{
width: 100px;
height: 100px;
border : 2px solid blue;
}
.a{
margin-bottom: 100px;
}
.b{
margin-top: 100px;
}取a-b 之间间距较大的值
margin:0 auto;padding 内填充会扩充盒子的大小
盒子模型总尺寸=border+padding+margin+内容宽度
| box-sizing | |
|---|---|
| content-box | 默认值, 填充会扩容盒子大小 |
| border-box | 不会扩容盒子大小 |
.a{
width: 200px;
height: 200px;
border:2px double red;
border-radius: 50% ;
background: radial-gradient(circle, red, yellow, green);
}制作特殊图形
// 上半圆
.b{
width: 400px;
height: 200px;
border:2px double red;
border-radius: 200px 200px 0 0 ;
background-color: blue;
}// 左半圆
.c{
width: 200px;
height: 400px;
border:2px double red;
background-color: green;
border-radius:200px 0 0 200px;
}1/4 圆
.d{
width: 200px;
height: 200px;
border:2px double red;
background-color: green;
border-radius:200px 0 0;
}box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow 必需。水平阴影的位置。允许负值。
v-shadow 必需。垂直阴影的位置。允许负值。
blur 可选。模糊距离。
spread 可选。阴影的尺寸。
color 可选。阴影的颜色。
inset 可选。将外部阴影 (outset) 改为内部阴影。 .dv{
width: 100px;
height: 100px;
border-radius:50% ;
border:1px solid green;
background-color: skyblue;
box-shadow:9px 3px 1px #888;
}标准文档流
指元素根据块元素或行内元素的特性按从上到下，从左到右的方式自然排列。这也是元素默认的排列方式
举例 h系列 p 段落 div table 表格 ul ol 列表
a 超链接 span 字体标签
| 区别 | |
|---|---|
| block | - 标签前后都有换行符(默认元素独占一行) |
| inline | - 标签按照从左到右的顺序 |
| inline-block |
区别一：
块级：块级元素会独占一行，默认情况下宽度自动填满其父元素宽度
行内：行内元素不会独占一行，相邻的行内元素会排在同一行。其宽度随内容的变化而变化。
区别二：
块级：块级元素可以设置宽高
行内：行内元素不可以设置宽高
区别三：
块级：display:block;
行内：display:inline; inline-block
可以通过修改display属性来切换块级元素和行内元素。
区别四：
块级：块级元素可以设置margin，padding
行内：行内元素水平方向的margin-left; margin-right; padding-left; padding-right;可以生效。但是竖直方向的margin-bottom; margin-top; padding-top; padding-bottom;却不能生效。
block inline inline-block none
和 visibility: hidden 的区别
是否隐藏原元素的位置
作用 让块级元素横向显示
语法: float : left / right
display:inline-block
可以让元素排在一行，并且支持宽度和高度，代码实现起来方便
位置方向不可控制，会解析空格
IE 6、IE 7上不支持
float
可以让元素排在一行并且支持宽度和高度，可以决定排列方向
float 浮动以后元素脱离文档流，会对周围元素产生影响，必须在它的父级上添加清除浮动的样式
/* 给收到影响的元素添加属性 */
clear: both;在影响的元素之前添加额外标签
<div class="clear"></div><div class="father">
<div class="son1"></div>
<div class="son2"></div>
<div class="son3"></div>
</div>
.father{
border: 2px solid red;
}
.son1,.son2,.son3{
width: 200px;
height: 200px;
background-color: green;
float: left;
margin-left: 10px;
}解决方式1
// 使用额外标签法
<div class="clear"></div>解决方式2
给父元素设置高度解决方式3
overflow:hidden解决方式4
// 父级添加伪类after
.clear:after{
content: ''; /*在clear类后面添加内容为空*/
display: block; /*把添加的内容转化为块元素*/
clear: both; /*清除这个元素两边的浮动*/
}当子元素溢出父级容器的时候 , 父级元素定义如何显示
hidden scroll auto
语法 position
- static 默认值 以标准文档流的方式显示
- relative 相对定位
- absolute 绝对定位
- fixed 固定位置
相对自身原来位置进行偏移
作用
1- 主要用于位置的微调
2- 和绝对定位搭配使用
值允许为负值
两个特点
1- 移动的位置是相对于它原来的位置进行移动
2- 不会脱离文档流而存在,会保留原来的位置, 不会对其他元素产生影响
3- 图层会上升作用 给图标 或者 广告进行 全局定位
特点
1- (如果已经存在已定位的父元素)移动的位置是相对于父元素
2- (如果已经不存在已定位的父元素)移动的位置是相对于浏览器视窗
3- 脱标, 脱离标准文档流,不会保留原来的位置子元素是绝对定位 , 需要把父元素设置为相对定位, 如此一来,子元素的定位位置就是基于父元素的
fixed
一般在网页中被用在窗口左右两边的固定广告、返回顶部图标、吸顶导航栏等值越大 , 可见度越高行高 文本在自身的行高中是上下居中的
把单行文本的行高设置为容器的高度, 文本就会在容器中上下居中
如果是多行文本, 需要详细计算 文本的总行高为多少, 和父容器相对位置, 设置padding值
原文：https://www.cnblogs.com/linyuan66/p/11210675.html