CSS基础内容
css简介
概念:CSS 指的是层叠样式表* (Cascading Style Sheets),CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素,CSS 节省了大量工作。它可以同时控制多张网页的布局,外部样式表存储在 CSS 文件中。
样式
- 在标签里直接设置的样式
<p style="color: red; font-size: 60px;">123</p>
- 内部样式:将样式编写到head中的style标签里,然后通过CSS选择器来选中元素并为其设置各种样式, 可以同时为多个标签设置样式,并且修改时只需要修改一处即可全部应用。
<style>
p{
color: green;
font-size: 50px;
}
- 外部样式:可以将CSS样式编写到一个外部的 CSS文件中, 通过link标签进行引入。
优点:将样式编写到外部的CSS文件中,可以使用到浏览器的缓存机制,从而加快网页的加载速度,提高用户的体验。
格式:<link rel="stylesheet" href="./style.css">
CSS语法
- 注释:/* */
- 语法:选择器 声明块
- 选择器:可以选定指定元素
比如p标签,可以选中页面中所有的p元素 - 声明块:给元素设置样式
声明是名值对结构,以冒号:连接 ;结尾
- 选择器:可以选定指定元素
<style>
p{
color: blue;
font-size: 40px;
}
CSS常用选择器
- id选择器
- 作用:根据元素的id属性值选中一个元素
- 语法:#id属性值{}
- 例子:#box{} #red{}
代码:
<head>
<style>
#abc{
color: blue;
}
</style>
</head>
<body>
<p id="abc">少小离家老大回</p>
</body>
- 类选择器
- 作用:根据元素的class属性值选中一组元素
- 语法:.class属性值
- 例子:.blue{}、.red{}
代码:
.blue{
color: chartreuse;
}
.abc{
font-size: 20px;
}
<h1 class="blue abc " >少小离家老大回</h1>
- 通配选择器
- 作用:选中页面中的所有元素
- 语法:*
CSS复用选择器
- 交集选择器
- 作用:选中同时符合多个条件的元素
- 语法:选择器1选择器2选择器3选择器n{}
- 例子:div.red{} 注意:交集选择器中如果有元素标签,必须使用元素选择器开头
代码:
<style>
h1 .blue{
font-size: 40px;
color: rgb(111, 0, 255);
}
</style>
<h1 class="blue">bbbbb</h1>
- 并集选择器
- 作用:选中多个选择器对应的元素,满足选择器其一即可改变
- 语法:选择器1,选择器2,选择器3,选择器n{}
- 例子:div,.red{}
代码:
p,.blue{
font-size: 40px;
color: rgb(111, 0, 255);
}
<p >aaaaa</p>
<h1 class="blue">bbbbb</h1>
CSS关系选择器
- 子元素选择器
- 含义:直接被父元素包含的元素叫子元素
- 语法:父元素>子元素{}
- 例子:div>span{}
代码:
<style>
div>span{
color: blue;
}
</style>
</head>
<body>
<div >
这里是div标签
<p>
这里div里面的是P标签
<span>这里是p里面的span标签</span>
</p>
<span>div里面的span标签</span>
</div>
</body>
结果:
- 后代元素选择器
- 含义:直接或者间接被祖先元素包含的元素叫做后代元素
- 语法:祖先 后代{}
- 例子:div span{} 选择div里面的所有后代为span的元素
代码:
<style>
div>span{
color: blue;
}
</style>
</head>
<body>
<div >
这里是div标签
<p>
这里div里面的是P标签
<span>这里是p里面的span标签</span>
</p>
<span>div里面的span标签</span>
</div>
</body>
结果:
- 兄弟元素选择器
- 含义: 拥有相同父元素的元素是兄弟元素
- 语法:1.前一个+后一个 选择后一个兄弟 2.前一个~后一个 选择后一个之后的全部兄弟元素
- 例如:p+span{},和前面子元素选择器的效果是一样的。
CSS属性选择器
- 作用:指定标签里面的属性的元素
- 语法: 标签 [属性名] {} 满足标签且有这个属性名的
标签[属性名=”属性值”] {} 满足标签且有这个属性名的,还有值确定的
标签[属性名^=”属性值”]{} 选择属性值以指定值开头的元素
标签[属性名$=”属性值”]{} 选择属性值以指定值结尾的元素
标签[属性名*=”属性值”]{} 属性值中含有某值的元素 - 例子: p[title]{} p[title=”123”]{} p[title^=”123”]{} p[title$=”123”]{} p[title*=”123”]{}
代码:
<head>
<style>
p[title*="a"]
{
color: aqua;
}
</style>
</head>
<body>
<p title="abc">少小离家老大回</p>
<p title="abc123hb">乡音无改鬓毛衰</p>
<p title="def">儿童相见不相识</p>
<p>笑问客从何处来</p>
</body>
结果:
CSS伪类选择器
-
含义:不存在的类,特殊的类,伪类用来描述一个元素的特殊状态,比如:第一个子元素、被点击的元素、鼠标移入的元素…
-
语法:伪类一般情况下都是使用 : 开头
- :first-child 第一个子元素
- :last-child 最后一个子元素
- :nth-child(n) 选中第n个子元素
- n的值:
0~正无穷
2n选中偶数的元素
2n+1 或者odd选中奇数位的元素
(这些伪类都是依据所有的子元素进行排序)
-
:first-of-type
-
:last-of-type
-
:nth-of-type(n)
-这几个伪类的功能和上述的类似,不同点是在同类型元素中的排序
代码:
<head>
<style>
ul>li:not(:nth-of-type(3))
{
color: yellowgreen;
}
</style>
</head>
<body>
<ul>
<span>123</span>
<li>第一个 </li>
<li >第二个</li>
<li>第三个</li>
<li>第四个</li>
<li>第五个</li>
</ul>
</body>
结果:
CSS a元素的伪类
a元素超链接的伪类设置
- link:表示没访问过的链接(正常的链接)
- visited:表示已经访问过的链接,注意的是font-size在visited设置无效,因为隐私的原因,只能修改颜色
- hover: 用来表示鼠标移入的状态
- active :用来表示鼠标点击
- 使用格式:a:属性{},例如:a:link{}
CSS伪元素选择器
含义:伪元素,表示页面中一些特殊的并不真实存在的元素(特殊的位置)
要求:伪元素以 ::开头
属性:
- ::first-letter{} 表示第一个字母
- ::first-line{} 表示第一行
- ::selection{} 表示选中的内容
- ::before{} 表示元素的开始
- ::after{} 表示元素的最后
-before和after必须结合content属性来使用,且不能被选中
content属性就是里面的值无法被选中。
<head>
<style>
div::before{
content: 'abc';
color: rgb(47, 107, 160);
}
div::after{
content: '123';
}
</style>
</head>
<body>
<div>Hello Hello</div>
</body>
结果:
CSS样式的继承
样式的继承,我们为一个元素设置样式同时也会应用到它的后代元素上
注意:并不是所有的样式都会被继承
比如:背景相关的,布局相关的样式都不会被继承
CSS选择器的权重
样式的冲突
-当我们通过不同的选择器,选中相同的元素,并且为相同的样式设置不同的值是,此时发生了样式冲突,发生冲突时,由选择器的权重(优先级)决定.
选择器 | 优先级 |
---|---|
内联样式(行内样式) | 1,0,0,0 |
id选择器 | 0,1,0,0 |
类(class)和伪类选择器 | 0,0,1,0 |
元素选择器 | 0,0,0,1 |
通配选择器 | 0,0,0,0 |
继承选择器 | 没有优先级 |
比较选择器时,需要将所有的选择器的优先级进行相加计算,最后优先级越高,则优先显示
分组选择器单独计算 选择器1,选择器2, 如果优先级计算后相等,优先使用靠下的样式。
代码:
<head>
<style>
div{
color: yellow;
}
.red{
color: bule;
}
#box1{
color:red ;
}
</style>
</head>
<body>
<div id="box1" class="red">我是一个div</div>
</body>
结果:
CSS像素和百分比
像素
- 屏幕(显示器)实际上是由一个一个小点构成
- 不同屏幕的像素是不同的,像素越小的屏幕显示的效果越清晰
- 所以同样的200px在同样的设备下显示效果不一样
- 表示: px
百分比
- 可以将属性在设置为相对于其父元素属性的百分比
- 设计百分比可以使子元素跟随父元素的属性值
- 表示: %
em:
- em是相对于元素的字体大小来计算的
- 1em=1 font_size,em会根据字体大小的改变而改变
rem
- rem是相对于根元素而字体大小来计算,根元素就是html字体的元素
代码:
<head>
<style>
html{
font-size: 10px;
}
.box1{
width: 100px;
height: 100px;
background-color: rgb(140, 187, 54);
}
.box2{
width: 50%;
height: 50%;
background-color: blue;
}
.box3{
font-size: 30px;
width: 10rem;
height: 10rem;
background-color: rgb(207, 111, 31);
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
<div class="box3"></div>
</body>
结果:
box3是通过根元素 html { font-size: 10px; } 来改变的,里面修改不起作用。
CSS颜色单位
颜色单位:在CSS中可以直接使用颜色名来设计各种颜色,比如:red orange yellow blue green,但是在CSS中直接使用颜色名记不住,非常难记。
那么我们可以使用REG来设置。
RGB值:
- reg通过三种的不同浓度来调配出不同的颜色
- r:red g:green b:blue
- 每一种颜色的范围在 0255(0%100%)之间
- 语法:rgb(红色,绿色,蓝色)
RGBA:
- 就是在rgb的基础上增加一个值,表示不透明度
- 需要四个值,前三个和rgb一样第四个表示不透明度
- 1表示完全不透明 0表示完全透明 .5表示半透明
十六进制的rgb值:
- #红色绿色蓝色
- 颜色浓度通过00-ff
- 如果颜色两两重复可以进行简写
HSL值
- H : 色相 取值范围(0~360)
- S : 饱和度 颜色浓度 0%~100%
- L : 亮度 0%~100%