系列文章目录
提示:这里可以添加系列文章的所有文章的目录,目录需要自己手动添加
CSS选择器的基础类型
- 标签选择器
- 类选择器
- id选择器
- 通配符选择器
CSS的基础运用
- 基本语法格式
- 字体的相关属性
- 文本相关属性
- css三种样式表
- 行内元素、块级元素的特点及其转换
- css的三大特性
- 权重
一、基础选择器
标签选择器:用标签名来进行定义,由标签名做选择器
<style>
p{
color: blue;
font-size: 20px;
}
</style>
呈现效果
类选择器:由class的属性值来充当选择器,用class来调用,可单独选择一个标签或或则多个标签同时定义其格式。
<style>
.one {
color: green;
font-size: 16px;
}
</style>
<p class="one">外面有好多人</p>
<p class="one">外面有好多书</p>
id选择器:以id属性来设置id选择器,以#加id的属性值来进行定义,是一个标签特定的属性,不可重复只能调用一次。
<style>
#one {
color: green;
font-size: 16px;
text-align: center;
}
</style>
<p id="one">外面有好多人</p>
<p id="one">外面有好多书</p>
通配符选择器:表示选取页面内所有的标签,通常运用在重置浏览器的边距
<style>
* {
padding: 0;
margin: 0;
}
</style>
二、CSS的基础运用
1、CSS的基础格式:
选择器{ 属性名:属性值;属性名:属性值;}
2、字体的相关属性:
-
字体系列:font-family:属性值;
-
字体大小:font-size:属性值;(属性值数字表示,单位px)
-
字体粗细:font-weight:属性值
normal:正常(默认) 数值 400
bold : 加粗;
bolder :特粗; 数值 700;
lighter :细体 -
字体样式:font-style:属性值
normal:不倾斜;
italic:倾斜(相似的标签:i标签) -
字体的复合属性:
font: font-style;font-weight;font-size;font-family;
p{
italic;400(normal);16px;Microsoft yahei;
}
注意: 固定顺序,不能改变,一点要有后两个的属性值;
<style>
p {
font-family: serif;
font-size: 20px;
font-weight: 400;
font-style: normal;
color:rgb(60, 124, 52);
text-align: center;
}
</style>
<p calss="hai">傍晚的海金碧辉煌,神秘而美丽。夕阳西下,天空还燃烧着一片橘红色的晚霞</p>
3、文本的相关属性
- 文本颜色:color:属性值;
- 文本对齐:text-align:属性值;
left:对其左边;
center:对其中间;
right:对齐右边; - 装饰文本:text-decoration:属性值;
none:无
underline:下划线;
overline:上划线;
through-line:删除线; - 文本缩进:text-inden:属性值;(单位 px 或则 em)
注意:1em:表示当前一个文字大小的距离。 - 文本间距:text-height:属性值;
行间距:分为上间距、文本高度、下间距;
两行文字之间的间距是由上间距与下间距之和决定的
注意:1、让文字出垂直居中,需让文本高度和盒子高度一样高。
2、删除链接中的下划线,用文本装饰中的none进行定义。
<style>
p {
font-family: serif;
font-size: 20px;
font-weight: 400;
font-style: normal;
}
.one {
text-align: center;
text-decoration: none;
color: rgb(30, 112, 33);
text-indent: 2em;
line-height: 40px;
}
</style>
<p class="one">春雨沙沙地下着,有如绣花针,有如牛毛。河面的雪融化了,雪水汇成小溪,淙淙地流着。河水中,一只只小蝌蝌顽皮
地游着,好像在找它的妈妈,可爱极了。
</p>
<a href="https://www.baidu.com/" class="one" >点击此处到百度网页</a>
对垂直居中文本的应用:
<style>
div{
width: 300px;
height: 50px;
line-height: 50px;
color: blue;
background: pink;
text-align: center;
margin:0 auto;
}
</style>
div>额复合管会否而未回复哈</div>```
4、三种样式表:
- 行内样式表:内联样式,又有人称行内样式、行间样式、内嵌样式。是通过标签的style属性来设置元素的样式,其基本语法格式如下:
<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>
- 内部样式表:内嵌式是将CSS代码集中写在HTML文档的head头部标签中,并且用style标签定义,其基本语法格式如下:
<head>
<style type="text/CSS">
选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
</style>
</head>
- 外部样式表:链入式是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中,通过link标签将外部样式表文件链接到HTML文档中,其基本语法格式如下:
<head>
<link href="CSS文件的路径" rel="stylesheet" />
</head>
5、行内元素、块级元素的特点及其相互转换:
行内元素转化为块级元素:display:block;
块级元素转化为行内元素:display:inline;
转化为行内块元素:diisplay:inline-block;
<style>
div{
display: inline;
background: rgb(200, 200, 242);
}
</style>
<div>额复合管会否而未回复哈</div>
<div>不出外勤会计部分</div>
6、CSS样式的三大特性:
- 层叠性
层叠性是多种CSS样式的叠加,是浏览器处理样式冲突的方式。在HTML中对于同一个元素可以有多个CSS样式存在,当有相同权重的样式存在时,会根据这些样式出现的先后顺序来决定,处于最后面的CSS样式将会覆盖前面的CSS样式。
举例:下面代码,出现一个div 标签指定了相同样式不同值的情况,这就是样式冲突。
div{
color:red;
}
div{
color:blue;
}
原则
1.通常出现样式冲突,会按CSS书写的顺序,以最后的样式为准。
2.样式不冲突,不会层叠。 样式冲突,遵循就近原则。
3.长江后浪推前浪,后面样式盖前面
- 继承性:
继承性是指当子标签没有设置样式时,会继承父标签的样式。
比如一个子标签没有设置背景颜色,那么子标签会继承父标签的背景颜色。
<style>
div{color:pink;font-size:20px;}
</style>
<div>
<span>
我是什么颜色的?
</span>
</div>
可继承的属性比如有字体类属性(字体颜色、字体大小之类的)、文本类属性(行高之类的)、背景类属性(背景颜色之类的)(要注意子标签不会继承父标签的宽度、高度、边距属性。
- 优先级:
总结优先级
!important>行内样式> ID 选择器>类(伪元素、伪类、属性)选择器>元素选择器>通用选择器
使用了 !important声明的规则。
内嵌在 HTML 元素的 style属性里面的声明。
使用了 ID 选择器的规则。
使用了类选择器、属性选择器、伪元素和伪类选择器的规则。
使用了元素选择器的规则。
使用了通配符的规则。
同一类选择器则遵循就近原则。
7、权重
CSS权重指的是样式的优先级,有两条或多条样式作用于一个元素,权重高的那条样式对元素起作用,权重相同的,后写的样式会覆盖前面写的样式。
可以把样式的应用方式分为几个等级,按照等级来计算权重
1、!important,加在样式属性值后,权重值为 10000
2、内联样式,如:style=””,权重值为1000
3、ID选择器,如:#content,权重值为100
4、类,伪类和属性选择器,如: content、:hover 权重值为10
5、标签选择器和伪元素选择器,如:div、p、:before 权重值为1
6、通用选择器(*)、子选择器(>)、相邻选择器(+)、同胞选择器(~)、权重值为0