04---HTML+CSS---CSS外联和选择器

最新推荐文章于 2023-07-04 19:14:52 发布

好大的汪汪

最新推荐文章于 2023-07-04 19:14:52 发布

阅读量1.1k

点赞数

分类专栏： css html

本文链接：https://blog.csdn.net/chishuiss/article/details/79192967

版权

css 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

html

8 篇文章 0 订阅

订阅专栏

CSS(Cascading Style Sheets)的用途就是为了给HTML标记添加样式。由单词和数值构成。网页先有结构，后有样式。

一、添加样式3种方法

1、行内样式：写在标签里面，

<p style=" "></p>

2、嵌入样式（行间样式）：style标签里

<head>
    <style>
    </style>
</head>

3、链接样式（引入样式）：(1)link标签引入.css文件

<head>
    <link rel="stylesheet" href="index.css" type="text/css">
</head>

4、style标签里

<style>
    @import url(index.css);<！--一定要写在style标签里面的第一行-->
</style>

网页解析

从上到下，从左到右。
遇到<style>，浏览器切换为解析css样式代码的状态。
遇到</style>，浏览器切换为解析html代码的状态。

二、选择器：

（1）id选择器：#id 一个html里不能有重复的id，是唯一的。

（2）class选择器：.class 一个html里可以有相同的class，可以是公共的。

（3）tag（标签）选择器：选择html中相同的标签。

例如：

p{font-famlily:"微软雅黑";}

选择的是：html里所有的p标签。

（4）属性选择器：选择html中同标签并且有同属性。

例如：

<style>
    div[title="ys"]{width:30px;height:40px;background-color:red;}
</style>
<body>
    <div title="ys">111</div>
    <div title="no">111</div>
    <div title="ys">111</div>
</body>

网页显示：
这里写图片描述

属性有很多，比如href属性，alt属性都可以用属性选择器。

选择的是：所有属性为title=”ys”的div标签。

（5）伪类选择器

— 这里写图片描述

1、一般选择器：

id选择器、class选择器、tag选择器都属于一般选择器。

一般选择器中较特殊的：

<head>
    p span{color:red;}
</head>
<body>
    <p>
        <span>我是span标签</span>
        <a><span>我是a标签</span></a>
        <span>我是另一个span标签</span>
    </p>
</body>

网页显示：
5-2
选择的是：p标签内部的所有（不管是儿子或是孙子… …）span标签。

3、特殊选择器：

>  +  ~

1、>（子选择器）

<head>
    p > span{color:red;}
</head>
<body>
    <p>
        <span>我是span标签</span>
        <a><span>我是a标签</span></a>
        <span>我是另一个span标签</span>
    </p>
</body>

网页显示：
5-3

选择的是：p的下一级（必须是儿子）。

## 2、+（紧邻同胞选择器）

<head>
    <style>
        div + p{color:red;}
    </style>
</head>
<body>
    <div>111</div>
    <p>222</p>
    <p>333</p>
    <p>444</p>
</body>

网页显示：
5-4

选择的是：与div同级的p标签中离div**最近**的一个p标签。

3、~（一般同胞）

<head>
    <style>
        div ~ p{color:red;}
    </style>
</head>
<body>
    <p>000<p>
    <div>111</div>
    <p>222</p>
    <p>333</p>
    <p>444</p>
</body>

网页显示：
5-5

选择的是：与div同级的并且在div**之后**的所有p标签。

4、选择器的优先级（权重）

行内（1000） > id（100） > class，属性，伪类（10） > tag（1）

div p{ }-------------2
.box span{ }------------11
#box a{ }-----------101
#box .haha{ }-------------110
#box a[title="ys"]{ }--------------110
#box #box2{ }--------------200

所占权重越大，优先级越高。

注意：

<div class="ha he">盒子<div>

当有多个类名时：.ha.he的优先级 > .ha的优先级（.ha和.he之间不能有空格）

换成id同理。

<div class="ha he" id="haha">盒子<div>

此时：#haha.ha优先级 > .ha

5、伪类选择器（较常见）

一个冒号代表一个伪类。

1、:link、:hover、:active、:visited

a:link{color:red;}<!--等待被点击-->

a:hover{color:yellow;}<!--鼠标正放在上面-->

元素1:hover 元素2{操作… …} 意思是：鼠标移动到元素1，元素2进行的操作。

a:active{color:blue;}<!--正在被点击-->

a:visited{color:green;}<!--点击过后-->

点击过后颜色没有变回来，可以通过清除浏览器缓存和改变href路径的方法使其变回来。（若有多个相同的href地址相同的a标签，那么点击了一个，其他href地址一样的也都会变颜色。）

实际情况中，不会以上四个都写，写一个hover。

2、:focus

input:focus{border:10px solid red;}

网页显示：点击输入框之后的效果。

5-6

输入框获取焦点。

3、:target

<head>
    <style>
        p:target{border:3px solid blue;}
    </style>
</head>
<body>
    <a href="#nay">男一号</a>
    <a href="#nvy">女一号</a>
    <p id="nay">男一号</p>
    <p id="nvy">女一号<p>
</body>

网页显示：

5-7
5-8
不常用。

4、:first-child

<head>
    <style>
        #ww div:first-child{color:red;}
    </style>
</head>
<body>
    <div id="ww">
        <div>111</div>
        <div>222</div>
    </div>
</body>

网页显示：

5-9

注意：first-child必须要有一个父级把它包裹起来，它的前面不能有同级元素。last同理（后面不能有同级）。很少用。

5、:first-of-type

<head>
    <style>
        #ww div:first-child{color:red;}
    </style>
</head>
<body>
    <div id="ww">
        <p>段落</p>
        <div>111</div>
        <div>222</div>
    </div>
</body>

网页显示：

5-10

111的前面可以有同级元素。last同理。很少用。

6、:nth-child(odd/even)

<head>
    <style>
        ul li:nth-child(odd){color:red;}
        ul li:nth-child(even){color:green;}
    </style>
</head>
<body>
    <ul>
        <li>11</li>
        <li>22</li>
        <li>33</li>
        <li>44</li>
        <li>55</li>
    </ul>
</body>

网页显示：

5-11

括号里也可以直接写数字。甚至可以写3n+1这种。

6、伪元素（较常见）

伪元素是在你的文档上时有时无的元素。（相当于创建了一个元素，但实际上是没有的）

首先要明确，伪类与伪元素是不一样的。

伪类（:）

伪元素（::）

1、::first-letter:

<head>
    <style>
        p::first-letter{font-size:50px;}
    </style>
</head>
<body>
    <p>这是一个段落</p>
</body>

网页显示：

5-12
作用：选择第一个字符。

2、::first-line:

<head>
    <style>
        p::first-line{font-size:50px;}
    </style>
</head>
<body>
    <p>这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落</p>
</body>

网页显示：

5-13
作用：选择第一行。

3、::before、::after

<head>
    <style>
        #a::after{content:"后面是B";}
    </style>
</head>
<body>
    <div id="a">A</div>
</body>

网页显示：

5-14

::before一般用于清楚浮动，做一些形状（如三角形），提示。

三角形：

<head>
    <style>
        #a{width:60px;height:20px;padding:5px;background-color:pink;}
        #a::after{content:"";border:10px solid transparent;border-top-color:black;position:relative;top:15px;left:12px;}
    </style>
</head>
<body>
    <div id="a">选项</div>
</body>

网页显示：

5-15

好大的汪汪

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
04---HTML+CSS---CSS外联和选择器

CSS(Cascading Style Sheets)的用途就是为了给HTML标记添加样式。由单词和数值构成。网页先有结构，后有样式。一、添加样式3种方法1、行内样式：写在标签里面，p style=" ">p>2、嵌入样式（行间样式）：style标签里head> style> style>head>3、链接样式（引入样式）：(1)link标签
复制链接

扫一扫