css引入方式
- 外联式:通过标签的style属性,在标签上直接写样式
在网页存储的文件夹中新建一个样式文件夹css,就跟图片存储一样。
然后写入右边的代码。
div{
font-size: 32px;
color: red;
}
在网页文件head模块中利用link嵌入:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 引进样式的第一个方法 -->
<link rel="stylesheet" type="text/css" href="css/main.css">
注:这里仅显示部分代码
- 内联式:
直接在head模块里面引入style:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 引进样式的第一个方法 -->
<link rel="stylesheet" type="text/css" href="css/main.css">
<!-- 引进样式的第二个方法 -->
<style type="text/css">
h1{
font-size: 20px;
color:gold
}
</style>
</head>
- 嵌入式:在网页上创建嵌入的样式表
<body>
<!-- 第三种方式 :行内样式-->
<h1>页面标题</h1>
<div>这是一个css标签</div>
<a href="http://www.baidu.com" style="font-size: 20px;color: pink" >百度一下</a>
</body>
例如:直接在a标签内添加style样式
css常用样式属性
文本常用样式
-
color 设置文字的颜色,如: color:red;
-
font-size 设置文字的大小,如:font-size:12px;
-
font-family
设置文字的字体,如:font-family:‘微软雅黑’;为了避免中文字不兼容,一般写成:font-family:‘Microsoft Yahei’; -
font-weight 设置文字是否加粗,如:font-weight:bold; 设置加粗 font-weight:normal
设置不加粗 -
line-height 设置文字的行高,如:line-height:24px;表示文字高度加上文字上下的间距是24px,也就是每一行占有的高度是24px
-
text-decoration 设置文字的下划线,如:text-decoration:none; 将文字下划线去掉,一般用于去掉下划线,比如网页链接会有下划线,一般去掉会好看一些。
扫描二维码关注公众号,回复: 11039017 查看本文章 -
font-style:设置倾斜,后面跟normal表示不倾斜
div{
font-size: 20px;
color: blue;
font-family: 'SimSun';
line-height: 30px
}
em{
font-style;
font-weight: bold;
color: green;
}
h1{
font-weight: normal;
}
注:当对文本的字体进行一起设置的时候,要按照顺序来:加粗 字体大小/行高 字体
div{
font: normal 20px/40px ;
color: blue;
line-height: 30px
}
- text-indent: 40px; 首行缩进,可以根据字符大小确定首行缩进几个字符
- text-align:left 选择文本居中(center), 靠左(left),靠右(right)
注:若对网址设置该样式,则该样式不会居中到整个网页中,因为段落的宽度默认是整个网页的宽度,但是链接不会,因为宽度是默认默认文本长度。如果需要居中 的话,需要转换文字类型
css选择器
如果想对同一层级的标签进行分层修改,应该怎样修改,用选择器修改
id 选择器
id 是所有标签的属性,所有标签都有id号
<style type="text/css">
div{
color: red;
}
#div1{
color: green;
}
</style>
<body>
<div id="div1">这是第一个div</div>
<div>这是第二个div</div>
<p>这是一个p标签</p>
</body>
类选择器
定义一个类,多处重合
/* 定义id选择器 */
#div1{
color: gold;
}
/* 定义类选择器 */
.green{
color: green;
}
.big{
font-size: 50px;
}
<!-- 使用id选择器和类的选择器 -->
<div id="div1" class="big">这是第一个div</div>
<div class="green big">这是第二个div</div>
<p>这是一个p标签</p>
注:当id选择器和类选择器冲突的时候,优先选择id选择器
层级选择器
主要应用在标签嵌套的结构中,层级选择器,是结合上面的两种选择器来写的选择器,它可与标签选择器结合使用,减少命名,同时也可以通过层级,限制样式的作用范围。
一般层级选择器不会超过4种,不然会降低网页性能
/* 定义层级选择器:这样的话只会改变“标签嵌套”,而不会改变“第一个” */
.box span{
color:purple;
font-weight: bold;
}
.box .box02{
color: blue;
font-family: "simsun";
<div id="div1" class="big">这是<span>第一个</span>div</div>
<div class="green big">这是第二个div</div>
<div class="box">主要应用在<span class="box02">标签嵌套</span>的结构中,层级选择器,是结合上面的两种选择器来写的选择器,它可与标签选择器结合使用,<span>减少命名</span>,同时也可以通过层级,限制样式的作用范围。</div>
组合选择器
定义不同选择器种相同的部分,比如有三个选择器,前两种样式都一样,就颜色不一样,可以简化成如下写法:
<style type="text/css">
.box01,.box02,.box03{
font-size: 20px;
text-indent: 40px;
}
.box01{
color: red;
}
.box02{
color: pink;
}
.box03{
color: gold;
}
</style>
<!-- 简便写法:.box01+tab -->
<div class="box01">1</div>
<div class="box02">2</div>
<div class="box03">3</div>
伪类及伪元素选择器
伪类:比如设置一个链接,把鼠标放上去就可以实现变色
<a href="http://www.baidu.com" class="link" target="blank">百度一下</a>
.link{
font-size: 30px;
text-decoration: none;
color: green;
}
.link:hover{
color: gold;
font-weight: bold;
}
把鼠标放上去就变成黄色了
伪元素:无法选中的元素
.box01,.box02{
font-size: 20px;
}
.box01:before{
content: "前面文字";
color: red;
}
.box02:after{
content: '后面文字';
color: gold;
}
<div class="box01">这是一个div</div>
<div class="box02">这是一个div</div>
~~删除线格式~~ ```