css入门和选择器

最新推荐文章于 2024-09-04 23:15:16 发布

王竹根

最新推荐文章于 2024-09-04 23:15:16 发布

阅读量235

点赞数

分类专栏：前端文章标签： html css

本文链接：https://blog.csdn.net/dianziagen/article/details/60775253

版权

前端专栏收录该内容

21 篇文章 0 订阅

订阅专栏

1CSS样式基本知识

1.1认识CSS样式

CSS全称为“层叠样式表 (Cascading Style Sheets)”，它用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。

如下列代码：

font-size:12px;color:red;font-weight:bold;

}

1.2css样式三种方法的优先级

内联：text

嵌入：<styletype="text/css">span{color:red;font-size:10px;}</style>

外部：<link href="style.css" rel="stylesheet"type="text/css">

记住他们的优先级：内联式 > 嵌入式 > 外部式

但是嵌入式>外部式有一个前提：嵌入式css样式的位置一定在外部式的后面。

代码：

三种方法的优先级.html

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>嵌入式css样式</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
span{
   color:blue;
}
</style>

</head>
<body>
<p>慕课网，<span style="color:red">超酷的互联网</span>、IT技术免费学习平台<span>服务及时贴心</span>，内容专业、<span>有趣易学</span>快速成为技术高手！</p>
</body>
</html>

Style.css

span
{
    color:yellow;
    font-size:20px;
}

效果

2css选择器

2.1类和ID选择器的区别

学习了类选择器和ID选择器，我们会发现他们之间有很多的相似处，是不是两者可以通用呢？

不同点：

1、ID选择器只能在文档中使用一次。与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次。

下面代码是正确的：

 <p>三年级时，我还是一个<span class="stress">胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个<span class="stress">勇气</span>来回答老师提出的问题。</p>

而下面代码是错误的：

 <p>三年级时，我还是一个<span id="stress">胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个<span id="stress">勇气</span>来回答老师提出的问题。</p>

2、可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式，但只可以用类选择器的方法实现，ID选择器是不可以的（不能使用 ID 词列表）。

下面的代码是正确的(完整代码见右侧代码编辑器)

.stress{

color:red;

}

.bigsize{

font-size:25px;

}

到了三年级下学期时，我们班上了一节公开课...

上面代码的作用是为“三年级”三个文字设置文本颜色为红色并且字号为25px。

下面的代码是不正确的

#stressid{

color:red;

}

#bigsizeid{

font-size:25px;

}

到了三年级下学期时，我们班上了一节公开课...

上面代码不可以实现为“三年级”三个文字设置文本颜色为红色并且字号为25px的作用。

2.2包含选择器和子选择器区别

包含选择器:加入空格,用于选择指定标签元素下的后辈元素。代码：

.first span{color:red;}

这行代码会使第一段文字内容中的“胆小如鼠”字体颜色变为红色。

包含选择器与子选择器的区别:

包含选择器通过空格来进行选择，子选择器是通过“>”进行选择。

总结：子选择器作用于元素的第一代后代，包含选择器作用于元素的所有后代。

代码：包含选择器

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>后代选择器</title>
    <style type="text/css">
.first span{color:red;}

.food li{
    border:1px solid red;/*添加边框样式（粗细为1px， 颜色为红色的实线）*/
}
</style>
</head>
<body>
<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
<!--下面是本小节任务代码-->
<ul class="food">
    <li>水果
        <ul>
            <li>香蕉</li>
            <li>苹果</li>
            <li>梨</li>
        </ul>
    </li>
    <li>蔬菜
        <ul>
            <li>白菜</li>
            <li>油菜</li>
            <li>卷心菜</li>
        </ul>
    </li>
</ul>

</body>
</html>

效果：

对比：子选择器

.food>li{
    border:1px solid red;/*添加边框样式（粗细为1px， 颜色为红色的实线）*/
}

效果：

2.3伪类选择符

更有趣的是伪类选择符，为什么叫做伪类选择符，它允许给html不存在的标签（标签的某种状态）设置样式，比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色：

a:hover{color:red;}

上面一行代码就是为 a 标签鼠标滑过的状态设置字体颜色变红。这样就会使第一段文字内容中的“胆小如鼠”文字加入鼠标滑过字体颜色变为红色特效。

关于伪类选择符，到目前为止，可以兼容所有浏鉴器的“伪类选择符”就是 a 标签上使用 :hover 了。其实 :hover 可以放在任意的标签上，比如说 p:hover，但是它们的兼容性也是很不好的，所以现在比较常用的还是 a:hover 的组合。

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>伪类选择符</title>
    <style type="text/css">
a:hover{
    color:red;font-size:20px;
}
</style>
</head>
<body>
<h1>勇气</h1>
<p class="first">三年级时，我还是一个<a href="http://www.imooc.com">胆小如鼠</a>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
<p id="second">到了三年级下学期时，我们班上了一节公开课，老师提出了一个很<span>简单</span>的问题，班里很多同学都举手了，甚至成绩比我差很多的，也举手了，还说着："我来，我来。"我环顾了四周，就我没有举手。</p>
</body>
</html>

效果：

2.总结：

标签选择器：标签名{},作用于所有标签。

类选择器：.类名{}，在标签内定义class="",属图形结构。

ID选择器：#ID{}，在标签内定义id="",有严格的一一对应关系。

子选择器：.span>li{}，作用于父元素span下一层的li标签。

包含选择器：.span li{}，作用于父元素span下所有li标签。

通用选择器: *{}，匹配所有html元素。

伪类选择符：它允许给html不存在的标签(标签的某种状态)设置样式，比如说我们给html中的一个标签元素的鼠标滑过的状态来设置字体颜色。

王竹根

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css入门和选择器

1CSS样式基本知识1.1认识CSS样式CSS全称为“层叠样式表 (Cascading Style Sheets)”，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。如下列代码：p{ font-size:12px; color:red; font-weight:bold;}使用CSS样式的一个好处是通过定义某个样式，可以让不同网页位置的文字有着统一的字...
复制链接

扫一扫

专栏目录