前端 之 CSS选择器、样式
文章目录
- CSS介绍
- 什么是 CSS
- CSS的使用
- 行间式
- 内联式
- 外联式
- 选择器
- 基本选择器
- 标签选择器
- 类选择器
- id选择器
- 通配选择器
- 基础选择器优先级
- 组合选择器
- 群组(分组和嵌套)选择器
- 子代(后代)选择器
- 相邻(兄弟)选择器
- 组合选择器优先级
- 属性选择器
- 伪类选择器
- 伪元素选择器
- 选择器优先级
- 标签样式
- 基本样式
- 常用样式
- 字体样式
- 文本样式
- 背景样式
- 边框
- 新边框属性
- dispaly属性
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
"stylesheet" type="text/css" href="my.css" />
CSS的第三种装饰方式
注意页面css样式通常都应该写在单独的css文件中
选择器
基本选择器
标签选择器
匹配文档中所有与标签名匹配的标签：如div{}会匹配文档中全部div，span{}会匹配文档中所有span
div {
background-color: yellow;
}
类选择器
匹配文档中所有拥有class属性且属性值为red的标签：如 均会被匹配
.red {
color: red;
}
注意：
样式类名不要用数字开头（有的浏览器不认）。
标签中的class属性如果有多个，要用空格分隔。
id选择器
匹配文档中所有拥有id属性且属性值为div的标签：如
均会被匹配，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">我有属性名和属性值并且值为1p>
<p xxx="2">我有属性名和属性值并且值为2p>
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:before
{
content:"*";
color:red;
}
after
在每个元素之后插入内容
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: 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。