html之CSS设计(四种引入方式、各种选择器)
原创
©著作权归作者所有:来自51CTO博客作者mb62e7593c01ba5的原创作品,请联系作者获取转载授权,否则将追究法律责任
文章目录
本文主要介绍一下CSS的基本操作,四中引入方式和选择器、属性选择器的使用
一、CSS简介
1、介绍:
也叫层叠样式表,用来控制网页数据的表现,可以使网页的表现与数据内容分离。简单来说就是控制网页样式的。
2、CSS的学习方向
- 怎么找标签(选择器)
- 如何操作标签对象(element)
二、四种引入方式
1、style属性
<div style="color:red; background:yellowgreen">第一种引入方式</div>
缺点:耦合性太强了,导致独立性变弱,代码都杂糅到一起了
2、style标签
<style>
p{
color:red;
font-size:40px;
}
a{
text-decoration:none;
}
以上代码就是对p标签和a标签进行样式设置
3、链接式引入
即使用link自闭和标签引入CSS文件
首先创建一个CSS文件:
在里面写入Style标签里同样的内容,即设置样式,请参照下文的选择器部分。
然后就是将文件链接进到需要操作的html文件:
<link href="test1.css" rel="stylesheet">
4、导入式引入
<style>
@import "test1.css";
显然以上几种方式中,链接式引入是最好用的,它不限制渲染文件的个数,修改起来也方便,独立性强不冗余
三、CSS选择器
1、选中所有标签
2、选中所有div标签
3、选中某个id下的标签
#first_p{
font-size:40px;
}
4、选中某个class下的标签
.class_name{
background:aqua;
}
5、只有class也可以精确定位
div.class_name2{
font-size:60px;
}
6、组合选择
#first_div,div.class_name3{
background:darkgray;
}
7、嵌套里的定位
.class_name4 div p{
background:rebeccapurple;
}
此段代码表示在类名为class_name4里的div标签里的p标签
嵌套规则:
块级元素可以包含内联元素或某些块级元素,但内联元素不能包含块级元素,它只能包含其它内联元素。
有几个特殊的块级元素只能包含内联元素,不能包含块级元素。如h1,h2,h3,h4,h5,h6,p,dt
块级元素与块级元素并列、内联元素与内联元素并列。
特殊:<p>标签内加<div>标签不会有效果
span标签:
<span>标签与<div>标签非常类似,是初始状态没有任何效果的一类标签
8、属性选择器(以下都可以省略E)
即通过自定义属性来查找和定位的选择器
- E[att] 匹配所有具有att属性的E元素,不考虑它的值,此处E可以省略
- E[att=val] 匹配所有att属性等于“val”的E元素
- E[att~=val] 匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素
- E[attr^=val] 匹配属性值以指定值开头的每个元素
- E[attr$=val] 匹配属性值以指定值结尾的每个元素
- E[attr*=val] 匹配属性值中包含指定值的每个元素
四、练习代码
1、CSS选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/**{
color:red;
}*/
#first_p{
font-size:40px;
}
.class_name{
background:aqua;
}
div.class_name2{
font-size:60px;
}
#first_div,div.class_name3{
background:darkgray;
}
.class_name4 div p{
background:rebeccapurple;
}
.class_name4 + div{
background:yellow;
}
</style>
</head>
<body>
I am in body label
<p>I just in p label</p>
<div class="class_name">I am in div label</div>
<p id="first_p" class="class_name">I have id number and class name</p>
<div class="class_name2">竟然用class精确定位到我了</div>
<div class="class_name3">组合选择1</div>
<div id="first_div">组合选择2</div>
<div>before div</div>
<div class="class_name4">
<div>
<a href="">打我呀</a>
<p>I am insert p label</p>
</div>
</div>
<div>after div</div>
</body>
</html>
2、属性选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
[viewin]{
color:red;
}
[viewin="ok2"]{
font-size:30px;
}
[viewin~="duo2"]{
color:blue;
}
[viewin^="sao"]{
background:pink;
}
[viewin$="a"]{
background:burlywood;
}
[viewin*="j"]{
background:yellow;
}
</style>
</head>
<body>
<!--属性选择器-->
<div viewin="ok">鸡排饭</div>
<div viewin="ok2">培根炒饭</div>
<div viewin="duo duo2 duo3">多多多</div>
<div viewin="sao1 sao2 sao3">扫扫扫</div>
<div viewin="hahaha">哈哈哈</div>
<div viewin="ghijklmn">啥值我都能匹配</div>
</body>
</html>