CSS
本文对CSS的一些简单用法进行介绍，希望对您有所帮助
CSS
一. CSS定义及引用
层叠样式表
代码结构：
2
3选择器{
属性名:属性值
}css引用
行内样式
2
3<div style="css属性名:css属性值;">
kaikai
</div>内嵌样式
使用style标签置于head标签对中
外链样式
使用link标签放置于head中
通过href获取css文件的相对路径 rel属性设为stylesheet
导入式
在style标签中通过 @import 导入
2
3<style>
@import url ("style.css");
</style>导入式与外链式的区别
加载效率不如外链
导入式会在最后去渲染样式会让用户先看到无样式的界面
外链式会首先加载link标签并渲染样式
所以基本上采用外链式
css引用优先级
行内样式 > 内嵌样式 > 外链样式 > 导入样式
link引用css文件的优点
- 实现内容与表现分离 有利于维护
- 减少css代码的编写量
- link与js文件以及body内的东西多线程加载，效率更高
- 有利于修改，单文件修改，全网站生效
- 浏览器会对css进行缓存，进一步减少加载时间
- 对搜索引擎友好，有利于SEO
二. CSS选择器
2.1css基础选择器
标签选择器 — weighting 权重：1
会对页面所有该类型标签进行选择
2
3
4div {
width:1px;
height:1px;
}类选择器 — weighting 权重：10
尽量代表实际功能
比如：一张图片 –> show_img; 一个字号16px的 —> fz_16
2
3
4
5
6
7
8.show_img {
width:1px;
height:1px;
}
/* 也可以并列写 但中间不可有空格 */
.show_img.fz_16{
...
}ID选择器 — weighting 权重：100
在页面中是唯一的，不是迫不得已不使用，防止后期维护困难
2
3
4
5
6#first{
...
}
#second{
...
}通用选择器 — weighting 权重：0
存在性能问题 一般高质量网页不使用
2
3*{
...
}2.2后代选择器
通过空格分隔
2
3div p span{
...
}2.3子选择器
与后代选择器的区别在于子选择器不能跨级 只能选取当前级别的往内一层
2
3div>p>span{
...
}2.4伪类选择器
通过一定的触发事件来实现效果
:hover 鼠标悬浮于该元素上设置的样式
:active 鼠标悬点击时元素上设置的样式
:visited 不建议使用 悬点击后元素上设置的样式
:focus 元素获得焦点后设置的样式
:target 唯一的页面元素其ID与当前的URL片段对应
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18<div>
<a href="#p1">to p1</a>
</div>
<div>
<a href="#p2">to p2</a>
</div>
<p id="p1">
楷楷1
</p>
<p id="p2">
楷楷2
</p>
------------------------------
<style>
p:target{
background-color:gold;
}
</style>
2.5群组选择器
适用于多个选择器使用同种样式，每个逗号间权重分开计算
可以多使用，有效分类管理，提升维护性，节省代码量，减小传输体积使页面加载速度快
2.6同级元素选择器
选定指定元素同级的下一个或后面的全部
+ / ~
2.7属性选择器
将一个标签的属性作为选择器使用
将一个属性作为选择器
2
3[src]{
...
}将一个属性值对作为选择器
2
3[class = "first"]{
...
}正则
//匹配以什么为开始 [class ^= "first"]{ ... }
2
3
4
5
6
+ ```css
//匹配以什么结束
[class $= "second"]{
...
}//匹配子表达式出现任意位置 [class *= "third"]{ ... }只有在class等于www或者www后有一个或多个空格时选择
2
3
4
5
+ ```css
[class ~= "www"]{
...
}```css
[class |= “fourth”]{
…
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
只有在class等于fourth或者fourth-时选择
+ 2.8权重
| 选择器 | 权重值 | 示例 |
| :----------: | :----: | :---------------: |
| 通用选择器 | 0 | ***** |
| 标签选择器 | 1 | **div** |
| 伪元素选择器 | 1 | **p:first-child** |
| 类选择器 | 10 | **.ew_16** |
| 属性选择器 | 10 | **[class=".."]** |
| 伪类选择器 | 10 | **a:hover** |
| ID选择器 | 100 | **#user** |
类似于子选择器 后代 同级 群组采用叠加
例：
```css
/*1+1+1+1=4*/
table tbody tr td{...}
/*1+10=11*/
form[name="user-form"]{...}
/*1+10+10=21*/
form[name="user-form"].data-form{...}
/*1+1+1+10=13*/
form>div>label[for]{...}
/*1+10+1+100=112*/
picture.photo>img#photo-1{...}
/*1+1+1+1+10+10=24*/
form div>label + input[type="radio"][name="gender"]{...}
/*1+1+100+1+10+1+10=124*/
header>nav#main-nav>ul.nav-list a:hover{...}尽量采用低权重原则
2.9多重样式的优先级
三.CSS字体样式
3.1 概述
文字的基本属性为font
3.2 字体风格 font-style
主要功能是将字体设置为斜体，效果和i和em标签一致
- normal 默认
- italic 斜体
- oblique 斜体再斜
3.3 字体粗细 font-weight
设置字体粗细程度
- normal 默认
- bold 粗体
- bolder 更粗的字体
- lighter 更细的字体
- 100 - 900 ：400为normal 700为bold 步长为100
3.4 字体大小 font-size
设置字体大小 必须加单位 主流字号是16px
3.5 字体系列 font-family
通常有 宋体 黑体 楷体 ，微软雅黑为最常用的设计字体
后面可跟多个值 浏览器会自动往后找 找不到则用默认
3.6 CSS字体组合写法
在font 后面直接跟
2
3
4.class1{
/*字体风格(font-style) 字体粗细(font-weight) 字体大小(font-size) 字体系列(font-family)*/
font: normal bold 26px "微软雅黑";
}3.7 创建引用特殊字体 @font-face
2
3
4
5@font-face{
/*该名称是自己定义的*/
font-family:kaikai;
src:url("...");
}3.8 CSS字体颜色
color属性
四.CSS文本样式
4.1 文本水平对齐 text-align
包括 left center right justify(两端对齐)
当 text-align 设置为justify时 还有一个新的属性text-align-last ，作用是设置文本中最后一行的对齐方式
可以等于的值同上
4.2 文本垂直对齐 vertical-align
baseline 默认
top 把文本元素的顶端与行中最高的文本元素顶端对齐
middle 以文本元素中心点为参照与行内其他文本元素的中心进行对齐
bottom 把文本元素的底端与行中最低的文本元素顶端对齐
sub 以文本元素的下标为参照与其他文本元素进行对齐
super 以文本元素的上标为参照与其他文本元素进行对齐
text-top 把文本元素的顶端与行中最高的字体顶端对齐
text-bottom 把文本元素的底端与行中最低的字体顶端对齐
百分数 使用line-height 属性的百分比值来排列元素，允许使用负值
不能对单个元素生效 至少需要2个在同一行内的行内元素或行内块元素才能生效
4.3 段落首行缩进 text-indent
中文布局一般使用 2em
实际项目中，统一控制首行缩进 如果某一段不需要缩进，则设置高一级的选择器使text-indent=0;
4.4 文本装饰线 text-decoration
a标签默认带一装饰线(下划线) 原因是将该属性设置为 underline
- none 默认 不显示 或者 消除已有的装饰线(需要更高的权重)
- underline 下划线 作用与u标签相同
- overline 上划线
- line-through 中划线 作用同 s 和 del 标签
text-decoration-line属性 值与上面一致
text-decoration-style属性
- solid 实线
- double 双实线
- dotted 点线
- dashed 虚线
- wavy 波浪线
text-decoration-color 设置颜色
也可以缩写
2
3/*位置 类型 颜色*/
text-decoration:(text-decoration-line) (text-decoration-style) (text-decoration-color);
/*使用text-decoration 值如果没有被赋值 则会是initial*/4.5 英文字母大小写转换 text-transform
- none 默认
- capitalize 首字母大写
- uppercase 所有字母大写
- lowercase 所有字母小写
4.6 文本的阴影 text-shadow
- 水平方向阴影 hoff-shadow 正数表示向右偏移 负数向左 单位为px
- 垂直方向偏移 voff-shadow 正数向下 负数向上
- 阴影模糊距离 blur 正数表示阴影模糊单位距离 距离越大模糊程度越高
- 阴影的颜色 color
4.7 段落文本行高 line-height
设置行内元素中文本字符在一行中所占据的高度
小妙用：当文本元素只有一行时，可以将line-height=height达到垂直居中的效果
4.8 单词的间距 word-spacing
设置英文单词间距 也就是调整空格字符的距离 可以为负数
4.9 字符的间距 letter-spacing
调整每个字符的距离
4.10 单词自动换行 word-break
浏览器对于长单词，如果没有空格则不会换行
- normal 默认换行规则
- break-all 允许单词内换行
- keep-all 只能在空格符 中文标点符 或连字符处换行
与之类似的有 word-wrap属性只有一个可用值 break-word
效果类似break-all ，区别在于
4.11 空格换行 white-space
- pre 段落内所有的换行符和空格被保留
- nowrap 不会换行 已换行的被强制不换行
- pre-wrap 基本等价于pre
- pre-line 多空格合并 但换行符被保留
4.12 设置文本方向 direction
从左往右 或 从右往左
- ltr (left to right) 从左到右
- rtl (right to left) 从右往左
4.13 设置书写模式 writing-mode
horizontal-tb 常规书写
vertical-rl tb tb-rl 从上而下 自右而左
vertical-lr 从上而下 从左到右
sideways-lr(火狐支持) 从下到上 从左到右换行
sideways-rl(火狐支持) 从上到下 从右到左换行
4.14 单行文本裁切 text-overflow
当文本溢出时处理
配合white-space 和 overflow 使用
- ellipisis 显示省略号来代表被裁减的文本
- clip 裁剪文本
4.15 多行文本裁切
生效的必要属性：
- -webkit-line -clamp:[number] 表示保留number行后开始进行文本裁剪
- overflow:hidden 隐藏溢出部分
- text-overflow:ellipisis 更好看到效果
- display:-webkit-box 使用webkit内核特殊的盒子
- -webkit-box-orient:vertical 表示盒子伸展方向为纵向
五.盒子模型
5.1 概述
- margin 外间距
- border 盒子壁
- padding 內间距
标准盒子模型weight 和 height只包含content的宽和高的值
5.2 元素宽度 width
IE盒子包含content padding border
标准盒子只包含content
像素设置和百分比设置
5.3 元素高度 height
类似width
不同的是要给各级上级元素设置height都设置一个值
5.4 外间距 margin
组合写法 顺时针 上右下左
两个值时 第一个代表上下 第二个代表左右
三个值时 上 左右 下
margin:0 auto 可以实现居中
特性问题
外边距合并问题
兄弟关系
垂直方向 取最大值
水平方向 各自占各自
父子关系
子元素设置外边距 显示效果为父元素外边距
解决方法：
- 给父盒子设置边框
- 加浮动
- overflow:hidden
5.5 內间距 padding
类似margin
padding对行内元素和块级元素的处理上存在差异
5.6 元素边框 border
border-width 设置边界宽度 搭配border-style使用
border-style
- none 无边框 默认值
- solid 实线
- dotted 点线
- dashed 虚线
- double 双线边框 需要width大于3px才能看出来
- groove 3D凹槽边框 大于5px
- ridge 3D凸槽边框 大于3px
- inset 内浮雕边框 大于1px
- outset 外浮雕边框 大于1px
border-color
组合写法
border:border-width border-style border-color
小三角设计
2
3
4
5
6
7
8
9
10section > div:hover:after {
content:"";
border-width: 15px;
border-style: solid;
border-color: #504e4e transparent transparent transparent;
position: absolute;
top: -.2em;
left: 50%;
transform: translateX(-50%);
}5.7 图片边框 border-image
border-image-sourse 图片地址
border-image-slice
一个值 四个方向的内偏移量
两个值 一个水平 一个垂直
如果出现fill 则数值部分表示一个值时的作用 fill表示可以替代background-image
border-image-width
border-image-outset 边框图像超出边框的量
border-image-repeat
- stretch 拉伸图像来填充
- repeat 平铺来填充
- round 类似repeat 无法完整平铺 则进行缩放
- space 类似repeat 无法完整平铺 则扩展空间会分布在图像周围
5.8 圆角的盒子 border-radius
最大为50% 超过将不会在有变化
5.9 元素的轮廓 outline
- outline-width 轮廓线宽度
- outline-style 样式
- outline-color 颜色
- outline-offset 轮廓线相对元素边界的距离
5.10 可调整元素大小的 resize
和 overflow搭配使用
- none 无法拖动
- both 可以任意方向调整
- horizontal 可以调整宽度
- vertical 可以调整高度
5.11 元素的阴影 box-shadow
- h-skewing 阴影在水平方向的偏移 负数向左
- v-skewing 垂直方向偏移 负数向上
- blur 模糊距离 模糊程度
- spread 扩展范围
- color
- inset 默认的向外改为向内
也可以多个组合属性 利用逗号隔开，形成多彩的效果
5.12 内容溢出属性 overflow
- visible 超出不被处理 会超出边界
- hidden 溢出内容被隐藏
- scroll 始终滚动条显示
- auto 只有在溢出时会出现滚动条
六.块级 行内块 行内
6.1 块级
- display:block
- display:list-item
p标签中不可以再放块级元素
6.2 行内
不能设置宽高
边距对水平生效 垂直不生效
6.3 行内块
img input
不独占一行 但可以设置宽高
七.定位
7.1 绝对定位 absolute
如果父元素设置定位为relative
孩子元素设置为absolute 则是相对于父元素
如果父元素不设置 则是相对于界面
子绝父相
7.2 相对定位 relative
会保留之前的位置
7.3 固定定位 fixed
脱离文档流 偏移位置为浏览器当前窗口
7.4 粘性定位 sticky
可以做吸顶效果
八.浮动元素自适应(清除浮动)
为父盒子设置高度
缺点 如果浮动元素个数多造成换行会出现问题
浮动元素后面加个空div标签 样式设置为clear:both
缺点 增加了空标签 不利于代码可读性
溢出隐藏 overflow:hidden
缺点 会隐藏溢出的元素
最优方案
伪元素
2
3
4
5
6
7
8
9.class::after{
content:"";
clear:both;
display:block;
/*隐藏方法*/
display:none; /*不会占位*/
visibility:hidden;/*占位隐藏*/
}