CSS 笔记
程序员文章站
2022-03-07 09:17:24
@[toc] 概念 全称 : Cascading Style Sheet 级联样式表 (层叠) 作用 : 定义 如何显示 HTML 元素 出现的原因 : 解决内容与表现分离的问题 好处 : 外部样式表 可以极大提高工作效率 优势 内容与表现分离 (类似于 盖房子和装修 ) 网页的表现统一，容易修改 ......
@
概念
全称 : 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}
通用选择器 *
- 对比三个选择器
标签选择器直接应用于html标签
类选择器可在页面中多次使用 ,一个标签可以同时添加多个类
id选择器在同一个页面中只能使用一次
- 优先级
id选择器 > 类选择器 > 标签选择器
三种选择器的顺序 不遵循就近原则
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 通配符 0
css样式
背景
常用属性
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 italic
font-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 | 简写属性。用于把所有用于列表的属性设置于一个声明中。 |
| 将图象设置为列表项标志。 | |
| 设置列表中列表项标志的位置。 | |
| 设置列表项标志的类型。 |
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
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+内容宽度
css3 新属性
box-sizing
| box-sizing | |
|---|---|
| content-box | 默认值, 填充会扩容盒子大小 |
| border-box | 不会扩容盒子大小 |
圆角边框 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)
举例 h系列 p 段落 div table 表格 ul ol 列表
行级元素 (inline )
a 超链接 span 字体标签
行内块元素 (inline-block)
| 区别 | |
|---|---|
| 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;却不能生效。
dispaly 切换元素的行块属性
block inline inline-block none
display: none
和 visibility: hidden 的区别
是否隐藏原元素的位置
制作qq会员导航
float
作用 让块级元素横向显示
语法: float : left / right
特点
- 脱离文档流 , (文档流 按照从上到下, 从左到右) 横排显示
- 图层会向上, 发生遮盖现象
- 原来的位置没有了
- 文字一定不会被遮盖
应用场景
- 网站布局
- 文本绕图
inline-block和float的区别
display:inline-block
可以让元素排在一行，并且支持宽度和高度，代码实现起来方便
位置方向不可控制，会解析空格
ie 6、ie 7上不支持
float
可以让元素排在一行并且支持宽度和高度，可以决定排列方向
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
当子元素溢出父级容器的时候 , 父级元素定义如何显示
hidden scroll auto
定位
语法 position
- static 默认值 以标准文档流的方式显示
- relative 相对定位
- absolute 绝对定位
- fixed 固定位置
相对定位
相对自身原来位置进行偏移
作用
1- 主要用于位置的微调
2- 和绝对定位搭配使用
值允许为负值
两个特点
1- 移动的位置是相对于它原来的位置进行移动 2- 不会脱离文档流而存在,会保留原来的位置, 不会对其他元素产生影响 3- 图层会上升
绝对定位
作用 给图标 或者 广告进行 全局定位
特点
1- (如果已经存在已定位的父元素)移动的位置是相对于父元素 2- (如果已经不存在已定位的父元素)移动的位置是相对于浏览器视窗 3- 脱标, 脱离标准文档流,不会保留原来的位置
子绝父相
子元素是绝对定位 , 需要把父元素设置为相对定位, 如此一来,子元素的定位位置就是基于父元素的
固定定位
fixed 一般在网页中被用在窗口左右两边的固定广告、返回顶部图标、吸顶导航栏等
z-index属性
值越大 , 可见度越高
行高
行高 文本在自身的行高中是上下居中的
把单行文本的行高设置为容器的高度, 文本就会在容器中上下居中
如果是多行文本, 需要详细计算 文本的总行高为多少, 和父容器相对位置, 设置padding值
上一篇： 回顾这段时间的收获