文章目录
CSS介绍
什么是 CSS
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML或 XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS的使用
语法结构:
选择器 { 属性 : 属性值 ; 属性 : 属性值 ; 属性 : 属性值 ; }
三种引入方式:
行间式
<div style="width: 100px; height: 100px; background-color: red">CSS的第一种装饰方式</div>
内联式
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div>CSS的第二种装饰方式</div>
</body>
外联式
file: my.css
div {
width: 100px;
height: 100px;
background-color: red;
}
file: my.html
<head>
<link rel="stylesheet" type="text/css" href="my.css" />
</head>
<body>
<div> CSS的第三种装饰方式</div>
</body>
注意页面css样式通常都应该写在单独的css文件中
选择器
基本选择器
标签选择器
匹配文档中所有与标签名匹配的标签:如div{}会匹配文档中全部div,span{}会匹配文档中所有span
div {
background-color: yellow;
}
类选择器
匹配文档中所有拥有class属性且属性值为red的标签:如<sup class=“red”></sup> <sub class=“red”></sub>均会被匹配
.red {
color: red;
}
注意:
样式类名不要用数字开头(有的浏览器不认)。
标签中的class属性如果有多个,要用空格分隔。
id选择器
匹配文档中所有拥有id属性且属性值为div的标签:如<div id=“div”></div> <section id=“div”></section>均会被匹配,id选择器必须保证单文档的唯一性
#div {
text-align: center;
}
通配选择器
匹配文档中所有标签:通常指html、body及body中所有显示类的标签
* {
border: solid;
}
基础选择器优先级
- 基础选择器优先级大致与选择器匹配范围成反比,匹配范围越小,优先级越高
- 基础选择器优先级大致与选择器匹配精度成正比,匹配精度越高,优先级越高
- 基础选择器优先级:id选择器 > 类选择器 > 标签选择器 > 通配选择器
组合选择器
群组(分组和嵌套)选择器
分组,不同的选择器可以共用一个样式
div, p, span{
color: red;
}
嵌套,后代选择器与标签组合使用
div p,span{
color: red;
}
- 分组一次性控制多个选择器,嵌套一次性控制被嵌套的多个选择器
- 选择器之间以,隔开,每一个选择器位均可以为任意合法选择器或选择器组合
子代(后代)选择器
子代选择器用>连接
div > span {
color: red;
}
后代选择器用空格连接
.sup .sub {
color: red;
}
- 一次性控制一个选择器(逻辑最后的那个选择器),前置位的选择器为修饰性选择器
- 每一个选择器位均可以为任意合法选择器或选择器组合
- 子代选择器必须为一级父子嵌套关系,后代选择器可以为一级及多级父子嵌套关系
相邻(兄弟)选择器
相邻选择器用+连接 对下不对上
.d1 + .d2 {
color: red;
}
兄弟选择器用~连接 对下不对上
.d1 ~ .d3 {
color: red;
}
- 一次性控制一个选择器(逻辑最后的那个选择器),前置位的选择器为修饰性选择器
- 每一个选择器位均可以为任意合法选择器或选择器组合
- 相邻选择器必须为直接相邻关系,兄弟选择器可以为直接相邻或间接相邻关系
组合选择器优先级
- 组合选择器优先级与权值相关,权值为权重和
- 权重对应关系
选择器 | 权重 |
---|---|
通配 | 1 |
标签 | 10 |
类、属性 | 100 |
id | 1000 |
!important | 10000 |
- 选择器权值比较,只关心权重和,不更新选择器位置
- 不同级别的选择器间不具备可比性:1个类选择器优先级高于n个标签选择器的任意组合
属性选择器
选择器 | 功能描述 |
---|---|
[ attr ] | 匹配拥有attr属性的标签 |
[ attr = val ] | 匹配拥有attr属性,属性值为val的标签 |
[ attr ~= val ] | 匹配拥有attr属性,属性值中包含指定词汇的标签。 |
[ attr |= val ] | 匹配拥有attr属性,属性值带有以指定值开头的属性值的标签,该值必须是整个单词。 |
[ attr ^= val ] | 匹配拥有attr属性,属性值以val开头的标签 |
[ attr $= val ] | 匹配拥有attr属性,属性值以val结尾的标签 |
[ attr *= val ] | 匹配拥有attr属性,属性值包含val的标签 |
<head>
<style>
只要有xxx属性名的标签都找到
[xxx] {
color: red;
}
只要标签有属性名为xxx并且值为
[xxx='1'] {
color: blue;
}
规定p标签内部必须有属性名为xxx并且值为2的标签
p[xxx='2'] {
color: green;
}
</style>
</head>
<body>
<p xxx>我只有属性名</p>
<p xxx="1">我有属性名和属性值并且值为1</p>
<p xxx="2">我有属性名和属性值并且值为2</p>
</body>
伪类选择器
选择器 | 类型 | 功能描述 |
---|---|---|
a:link | 链接伪类选择器 | 选择匹配的a元素,而且匹配元素被定义了超链接并未被访问过。常用于链接描点上 |
a:hover | 用户行为选择器 | 选择匹配的a元素,且用户鼠标停留在元素a上。 |
a:active | 用户行为选择器 | 选择匹配的a元素,且匹配元素被激活。常用于链接描点和按钮上 |
a:visited | 链接伪类选择器 | 选择匹配的a元素,而且匹配元素被定义了超链接并已被访问过。常用于链接描点上 |
a:focus | 用户行为选择器 | 选择匹配的a元素,而且匹配元素获取焦点 |
<head>
<style>
未访问的链接
a:link {
color: red;
}
鼠标移动到链接上
a:hover {
color: yellow;
}
选定的连接
a:active {
color: black;
}
已访问的链接
a:visited {
color: green;
}
input输入框获取焦点时样式
input:focus {
background-color: red;
}
</style>
</head>
<body>
<a href="https://www.baidu.com">百度</a>
<a href="http://www.xiaohuar.com">笑话网</a>
<a href="http://www.sogo.com">sogo网</a>
<input type="text">
</body>
伪元素选择器
first-letter
常用的给首字母设置特殊样式
p:first-letter {
font-size: 48px;
color: red;
}
before
在每个<p>元素之前插入内容
p:before {
content:"*";
color:red;
}
after
在每个<p>元素之后插入内容
p:after {
content:"[?]";
color:blue;
}
选择器优先级
相同选择器,不同的引入方式:就进原则,谁越靠近标签谁说了算
不同选择器,相同的引入方式:行内样式 > id选择器> 类选择器 > 标签选择器
标签样式
基本样式
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
长度
- px:像素(pixel),屏幕上显示的最小单位,用于网页设计,直观方便
- mm:毫米
- cm:厘米
- in:英寸
- pt:点(point),一个标准的长度单位,1pt=1/72in,用于印刷业,非常简单易用;
- em:相当长度,通常1em=16px,应用于流式布局
颜色
- red;直接写英文单词
- rgb():三个值可为[0-255]数值或百分比,以,相隔(r:Red g:Green b:Blue)
- rgba():前三个值可为像素或是百分比,最后一个透明度为[0, 1]数值,以,相隔(r:Red g:Green b:Blue a:Alpha)
- hsl():第一个值为[0,360]数值,后二个值可为百分比,以,相隔(h:Hue s:Saturation l:Lightness)
- hsla():第一个值为[0,360]数值,中间二个值可为百分比,最后一个为[0, 1]数值,以,相隔(h:Hue s:Saturation l:Lightness a:Alpha)
- #AABBCC:六个十六进制位,每两位一整体,分别代表Red、Green、Blue,可以简写#abc
常用样式
字体样式
- font-family:字体族科,多值用于备用,以,隔开
font-family: "STSong", "Arial";
- font-size:字体大小
- font-style: 字体风格 normal、italic、oblique
- font-weight:字体重量 normal、bold、lighter、100~900
- line-height:行高
- font:字重 风格 大小/行高 字族
文本样式
- color:文本颜色
- text-align:横向排列
left 居左 、center 居中 、right 居右、justify 两端对齐
- vertical-align:纵向排列
baseline:将支持valign特性的对象的内容与基线对齐
sub:垂直对齐文本的下标
super:垂直对齐文本的上标
top:将支持valign特性的对象的内容与对象顶端对齐
text-top:将支持valign特性的对象的文本与对象顶端对齐
middle:将支持valign特性的对象的内容与对象中部对齐
bottom:将支持valign特性的对象的文本与对象底端对齐
text-bottom:将支持valign特性的对象的文本与对象底端对齐
- text-indent:字体缩减
p{
text-indent: 48px;
}
- text-decoration:字划线
underline:下划线、overline:上划线、line-through:中划线、none:没有划线、inherit:承父元素的text-decoration属性的值
- letter-spacing:字间距
- word-spacing:词间距
- word-break:自动换行
normal:默认换行规则
break-all:允许在单词内换行
背景样式
- background-color:颜色
background-color: green;
- background-image:图片,通过 opacity:(0-1) 来控制透明度
background-image: url("bg.png");
- background-repeat:重复
background-repeat: no-repeat;
repeat(重复)、 no-repeat(不重复) 、repeat-x(X轴重复) 、repeat-y(Y轴重复)
- background-position:定位
background-position: center;
top、bottom、left、right 、center
- background-attachment:滚动模式
scroll、fixed
可以写到一起:
background: no-repeat center url("bg.png") blue ;
边框
- border-width:边框宽度
border-width: 3px;
- border-style:边框类型
none: 默认无边框、dotted: 点线框、dashed: 虚线框、solid: 实线边界、double: 两个边界、groove: 3D沟槽边界、ridge: 3D脊边界
- border-color:边框颜色
border-color:
transparent:透明
- 单独为某一个边框设置样式
{
border-top-style:dotted;
border-top-color: red;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:none;
}
- border-style:上 右 下 左 ;对不同的边框进行设置
属性可以有1-4个值
border-style:dotted solid double dashed;
可以写到一起:
border: 3px solid red;
- border-radius:边框圆弧的角度
div {
width: 400px;
height: 400px;
background-color: red;
border: 3px solid black;
border-radius: 50%;
}
新边框属性
属性 | 说明 |
---|---|
border-image | 设置所有边框图像的属性。 |
border-radius | 一个用于设置所有四个边框- *-半径属性属性 |
box-shadow | 附加一个或多个下拉框的阴影 |
dispaly属性
用于控制HTML元素的显示效果。
值 | 意义 |
---|---|
display:“none” | HTML文档中元素存在,但是在浏览器中不显示。一般用于配合JavaScript代码使用。 |
display:“block” | 默认占满整个页面宽度,如果设置了指定宽度,则会用margin填充剩下的部分。 |
display:“inline” | 按行内元素显示,此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。 |
display:“inline-block” | 使元素同时具有行内元素和块级元素的特点。 |
display:"none"与visibility:hidden的区别:
visibility:hidden: 可以隐藏某个元素,但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说,该元素虽然被隐藏了,但仍然会影响布局。
display:none: 可以隐藏某个元素,且隐藏的元素不会占用任何空间。也就是说,该元素不但被隐藏了,而且该元素原本占用的空间也会从页面布局中消失。