@
概念
全称 : 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>好处 : 外部样式表可以极大提高工作效率
优势
- 内容与表现分离 (类似于 盖房子和装修 )
- 网页的表现统一，容易修改
- 丰富的样式，使得页面布局更加灵活
- 减少网页的代码量，增加网页的浏览速度，节省网络带宽
- 运用独立于页面的CSS，有利于网页被搜索引擎收录
用法
语法格式
选择器{
声明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}id
<p id="pid">日照香炉生紫烟，</p>
#pid{color:green}通用选择器 *
- 对比三个选择器
- 优先级
CSS3 高级选择器
案例的初始化
<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
通配符 0CSS样式
背景
常用属性
background 简写属性，作用是将背景属性设置在一个声明中。
background-attachment (scroll , fixed)背景图像是否固定或者随着页面的其余部分滚动。
background-color 设置元素的背景颜色。
background-image (url(""))把图像设置为背景。
background-position (设置不重复 值可以是单词,像素,百分比 )设置背景图像的起始位置。
background-repeat (repeat,no-repeat,repeat-x,repeat-y)设置背景图像是否及如何重复。 CSS 3属性
background-size
可能的值
length 第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为 auto(自动)
percentage 相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置的高度
cover 此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。
contain 此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。简写属性
background : skyblue no-repeat url("2.jpg") center center ;CSS3 渐变色
线性渐变
线性渐变 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 简写属性。作用是把所有针对字体的属性设置在一个声明中。
- font-family 设置字体系列。
- font-size 设置字体的尺寸。
- font-style 设置字体风格。
- font-weight 设置字体粗细 ()
font-style
normal
italicfont-weight
bold 定义粗体字符。
bolder 定义更粗的字符。
lighter 定义更细的字符
100 - 900简写属性
可以按顺序设置如下属性：
font-style
font-weight
font-size/line-height
font-family
font:italic bolder 40px 宋体;文本
- color 设置文本颜色
- line-height 设置行高。
- text-align 对齐元素中的文本。
- text-decoration 向文本添加修饰。
- text-indent 缩进元素中文本的首行。
span 只是作为一个容器存在 text-indent 缩进
2em 当前文本的 大小单位text-decoration 装饰
none 默认。定义标准的文本。
underline 定义文本下的一条线。
overline 定义文本上的一条线。
line-through CSS3 特性
text-shadow 文本阴影
text-shadow:10px 10px 1px blue;
水平阴影，垂直阴影，模糊的距离，以及阴影的颜色：列表
list-style-position 演示 给li添加背景颜色
inside 列表项目标记放置在文本以内，且环绕文本根据标记对齐。
outside 默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。 list-style: circle inside url("a.png");表格
- border-collapse 设置是否把表格边框合并为单一的边框。
- border-spacing 设置分隔单元格边框的距离。
- caption-side 设置表格标题的位置。
- empty-cells 设置是否显示表格中的空单元格。
- table-layout 设置显示单元、行和列的算法。
盒子模型
div 标签
边框
- border-color
border-color : red blue green pink;
/* 从上开始 顺时针 上 右 下 左
如果只有三/两个颜色 red blue green 对边相同
如果只有一个颜色 四个边全相同border-width
border-style
简写属性
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+内容宽度
CSS3 新属性
box-sizing
圆角边框 border-radius
.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 盒子阴影
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;
}浮动
网站布局
分类
块级元素 (block)
行级元素 (inline )
行内块元素 (inline-block)
dispaly 切换元素的行块属性
display: none
和 visibility: hidden 的区别
是否隐藏原元素的位置
制作QQ会员导航
float
特点
- 脱离文档流 , (文档流 按照从上到下, 从左到右) 横排显示
- 图层会向上, 发生遮盖现象
- 原来的位置没有了
- 文字一定不会被遮盖
应用场景
- 网站布局
- 文本绕图
inline-block和float的区别
清除浮动元素影响
设置属性 clear
/* 给收到影响的元素添加属性 */
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; /*清除这个元素两边的浮动*/
}overflow
定位
相对定位
两个特点
1- 移动的位置是相对于它原来的位置进行移动
2- 不会脱离文档流而存在,会保留原来的位置, 不会对其他元素产生影响
3- 图层会上升绝对定位
特点
1- (如果已经存在已定位的父元素)移动的位置是相对于父元素
2- (如果已经不存在已定位的父元素)移动的位置是相对于浏览器视窗
3- 脱标, 脱离标准文档流,不会保留原来的位置子绝父相
固定定位
fixed
一般在网页中被用在窗口左右两边的固定广告、返回顶部图标、吸顶导航栏等z-index属性
值越大 , 可见度越高