小编给大家分享一下CSS的基础使用方法有哪些，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！第一部分：CSS的基本使用（1）CSS
小编给大家分享一下CSS的基础使用方法有哪些，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
第一部分：CSS的基本使用
CSS全称Cascading Style Sheets，翻译：层叠（级联）样式表。
如果说html是网页的结构，那么CSS就是网页化妆师。
CSS有三种写法：
直接写在标签内
写在style标签内
使用外部.css文件
（对应CSS的三种写法，就有三种引入CSS的方式，见下：）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS的引入方式1</title>
</head>
<body>
<!--第一种引入方式：行内样式-->
<!--注意：只能写在开始标签或者自闭合标签里，不能写在结束标签里哦-->
<!-- 直接给标签添加style属性，style的属性值里书写样式——样式与样式之间用分号隔开；样式的名称与样式值用冒号隔开！ -->
<!-- 注意：嵌套标签设置了最外层的样式，其内所有标签都会应用此样式！ -->
<p style="color:red;font-size:30px;">我是段落标签</p>
<!-- 优势：直观，很容易区分是给哪个标签添加的样式 -->
<!-- 劣势：代码冗余，样式过多的话，代码的可读性很差-->
<!-- 一般用于测试，不用于实际开发页面中 -->
</body>
</html>在设置属性color属性时，如下图操作，可以对颜色进行更加直观详细的选择：
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>CSS的引入方式2</title>
<!--第二种引入方式：内部样式-->
<!-- 优势：实现了标签和样式的分离，让代码的可读性更高 -->
<style>
p{
color: #c481ff
}
</style></head><body><p>我是段落标签</p></body></html>本处用的1.css文件内容：
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>CSS的引入方式3</title>
<!--第一种：链接式(建议使用)-->
<!--rel属性（relation）是当前这个HTML页面与链接进来的样式表之间的关系，在此链接进来的是本页面的样式表
href属性写样式表的路径-->
<link rel="stylesheet" href="1.css">
<!--第二种：导入式(不建议使用)-->
<style>
@import "1.css";
</style></head><body><!--第三种引入方式：外部样式（有两种）--><!--小提示：新建.css文件的方法，在PyCharm中是新建Stylesheet文件--><!-- 优势:实现了html文件和样式的分离，让代码的可读性更高，而且让代码的复用性也更高！ --><p>我是段落标签2</p></body></html>@import导入式不推荐使用，因为存在缺陷：在整个网页装载完之后再装载.CSS文件，如果网页文件过大时，会导致先出现无样式的页面，闪烁以后再出现样式网页。
而推荐使用< link >，因为它是先装载.css文件，再装载网页
在实际开发中我们不使用行内样式！
使用最多的是外部样式。
一般写demo的时候使用内部样式————因为给别人发demo的时候，只发一个文件即可。
无论是外部样式，内部样式还是行内样式，都会生效，它们共同为标签添加样式。
如果一个标签通过外部样式，内部样式设置了同一类样式（值不同），会产生覆盖效果————覆盖的原则：后写的样式覆盖先写的样式！（1）选择器权重：
现实生活中—谁的权利大，就听谁的，同理，选择器权重也是一样，谁的权重值高，应用谁的。这里的权重高低通过精确度评判，精确度越高，权重越大。
（2）选择器的用处：
用于准确的选中元素（就是HTML种讲的标签），并赋予样式。
| 作用：根据标签的名字找到标签； |
| 注意：它会找到所有的同名标签。 |
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>标签选择器</title>
<style>
p{
color: chartreuse;
}
</style>
</head><body><p>我是段落标签1</p><p>我是段落标签2</p></body></html>你可以理解为下图这个整体叫做选择器！！！
| 通过标签的class属性，选择对应的元素，借助了一个类的概念，一处定义，可以多处使用。 |
| 使用场景：它的作用对多个标签（往往需要相同的样式）设置样式。 |
| 一个标签可以设置多个class值，值与值之间用空格隔开，这个标签会具有所有class包含的样式。 |
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>类选择器</title>
<style>
.p1{
color:red;
}
</style></head><body><p class="p1">我是段落标签</p></body></html>类选择器可以选择多个，因为class属性不唯一；
但是id选择器只能选择一个，因为id是唯一的。
| 通过标签的id属性，选择对应的元素。 |
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>id选择器</title>
<style>
#p2{
color:cadetblue;
}
</style></head><body><p id="p2">我是段落标签</p></body></html>以上三个选择器的权重： id选择器 > 类选择器 >标签选择器
拓展：如果一个标签同时通过id选择器和类选择器设置了同一个样式，而我们想要其类选择器设置的样式（background-color）生效，但是看上面选择器权重——类选择器的权重是低于id选择器的，应该是id选择器设置的样式生效。但是我们可以通过在指定样式后添加!import来使其生效！！！
!important是权重最大的！！！
注意：!important只能作用于单个样式的值，它不是选择器！
| 群组选择器是可以同时选择多个标签的选择器。 |
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>群组选择器</title>
<style>
p,span{
color: #ff82c1;
}
</style></head><body><p>我是段落标签</p><span>我是文本标签</span><h2>我是一级标签</h2></body></html>| 顾名思义，选择所有标签！ |
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>全选择器</title>
<style>
*{
color: #a3ff50
}
</style></head><body><p>我是段落标签</p><h2>我是一级标题</h2><h3>我是二级标签</h3><span>我是文本标签</span></body></html>注 意：块状标签可以嵌套内联标签和其他块状标签；内联标签只能嵌套文本和其他内联标签,但不能嵌套块状标签。
有个特例：p标签和h标签不能嵌套块状标签，也不能嵌套本身，只能嵌套内联标签！！！
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>后代选择器</title>
<style>
p ol{
list-style: none;
}
</style>
</head><body><p>
<ol>
<li>我是有序列表1</li>
<li>我是有序列表2</li>
<li>我是有序列表3 <ol>
<li>我是有序列表111</li>
<li>我是有序列表222</li>
</ol>
</li>
</ol></p></body></html><!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>子代选择器</title>
<style>
#ul1>li{
list-style: none;
}
</style></head><body><!--子代选择器 颜色，字体等等在子代选择器里会继承。所以此处用list-style属性进行观察--><ul id="ul1">
<li>1</li>
<li>2</li>
<li>3 <ul>
<li>11</li>
<li>22</li>
<li>33</li>
</ul>
</li></ul></body></html><!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>兄弟选择器</title>
<style>
#p2~p{
color:#ff8971 }
</style></head><body><p>我是段落标签1</p><p id="p2">我是段落标签2</p><p>我是段落标签3</p><p>我是段落标签4</p></body></html><!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>相邻兄弟选择器</title>
<style>
#p2+p{
color:#ff8971
}
</style></head><body><p>我是段落标签1</p><p id="p2">我是段落标签2</p><p>我是段落标签3</p><p>我是段落标签4</p></body></html><!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style>
p[name]{
color: red;
}
</style></head><body><p name="p1">我是段落标签1</p><p name="p2">我是段落标签2</p><p name="p3">我是段落标签3</p><p>我是段落标签4</p></body></html>权重大小比较总结一句话：越具体（就是一开始说的准确度）权重越大；越模糊权重越小！
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>伪类选择器</title>
<!--伪类选择器-->
<!-- 语法格式—— 选择器：伪类名 -->
<!-- 如果要给一个元素加4个伪类，一定要遵守一个顺序（link visited hover active） -->
<style>
a:link{
color: #ff25ec;
}
a:hover{
color: #3b29ff;
}
a:active{
color: #ff9d47;
}
a:visited{
color:green;
}
</style>
</head><body><!--#表示空链接--><a href="#">我是超链接</a></body></html><!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>字体的常用样式</title>
<style>
p{
font-family: 黑体;
font-size: 30px;
font-style: italic;
font-weight: bold;
font-variant: small-caps;
font:italic small-caps nORMal 50px 黑体;
}
</style></head><body><p>我是段落标签</p><p>HELLO</p><p>hello</p></body></html><!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>文本常用样式</title>
<style>
p{
text-align: left;
line-height:40px;
text-indent:2em;
text-decoration: underline;
letter-spacing: 1em;
Word-spacing:50px;
line-height: 50px;
white-space: normal;
overflow: hidden;
text-overflow: ellipsis;
}
a{
text-decoration: none;
}
</style></head><body><!--注意：如果是内联标签，比如span是内联标签，始终都是居中状态，改对齐方式没用。
因为内联元素设置宽高无效，只与内容有关。--><p>我是一个段落标签</p><p>中国 上海 河南</p><a href="">111</a></body></html>行高的应用之实现单行文本垂直居中：
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>行高的一个应用</title>
<style>
p{
height: 200px;
line-height: 200px;
}
</style></head><body><p>我是段落标签</p></body></html><!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>背景的常用样式</title>
<style>
p{
width:300px;
height:300px;
background-color: #a3ff50;
background-image: url("");
background-size:100px 100px;
background-repeat: no-repeat;
background-position: center;
background:red url("") ;
}
</style></head><body><p></p></body></html><!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>渐变色之线性渐变</title>
<style>
#p1{
width:300px;
height: 300px;
background-image: linear-gradient(to left,skyblue,pink);
}
</style></head><body><p id="p1" class="p2"></p></body></html><!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>渐变色之径向渐变</title>
<style>
#p1{
width: 200px;
height: 300px;
background-image: radial-gradient(ellipse,skyblue,pink,white);
}
</style></head><body><p id="p1"></p></body></html><!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>渐变色之文字渐变</title>
<style>
span{
background-image: linear-gradient(to right,blue,black);
-WEBkit-background-clip: text;
color: transparent;
}
</style></head><body><!--文字本身是不能设置渐变的，我们是通过设置背景的渐变来实现文字的渐变的--><span>我是渐变的文字，我超级帅！</span></body></html>以上是“CSS的基础使用方法有哪些”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网html频道！
--结束END--
本文标题: CSS的基础使用方法有哪些
本文链接: https://www.lsjlt.com/news/88003.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0