2021-06-09

最新推荐文章于 2021-09-26 17:11:10 发布
最新推荐文章于 2021-09-26 17:11:10 发布
阅读量156 收藏
点赞数
分类专栏： web前端学习笔记 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/su_LinCheng/article/details/117748868
版权

web前端学习二——CSS基础（一）

1.CSS的两个特性
层叠
一个HTML文档可能会使用多重CSS样式单，细化到某元素来说，会层叠多层样式单，但生效的总会有个顺序，即样式生效的优先级如下：
内联样式>内部样式>外部样式>浏览器默认效果
继承
特定的CSS属性可以从父元素向下传递到子元素。

<body>
        <span><cite>北京欢迎你</cite>是北京奥运会宣传曲</span>
        <br />
        <span style="font-size: 30px;"><cite>北京欢迎你</cite>是北京奥运会宣传曲</span>
    </body>

上述代码并没有为元素使用样式，但继承了的样式，字体也会跟着变大，如图：
在这里插入图片描述
2.CSS的选择器
2.1 元素选择器
元素选择器是最简单的选择器，选择器通常是某个HTML元素，如p,h1,em,a，甚至可以是HTML本身。

<head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <title>元素选择器</title>
        <style type="text/css">
            h1 {
                color: red;
            }
        </style>
    </head>
    <body>
        <h1>HTML基础</h1>
        <p>HTML，超文本标记语言（HyperText Markup Language，简称HTML）。</p>
    </body>

在这里插入图片描述

2.2 通配符选择器
用‘*’表示，一般称之为通配符，表示对任意元素都有效。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/ html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <title>通配符选择器</title>
        <style type="text/css">
            * {
                color: red;
            }
        </style>
    </head>
    <body>
        <h1>HTML基础</h1>
        <p>HTML，超文本标记语言（HyperText Markup Language，简称HTML）。</p>
    </body>
</html>

在这里插入图片描述
2.3 属性选择器
对带有指定属性的HTML元素设置样式。

语法含义
元素[属性]用于选取带有指定属性的元素
元素[属性=值]用于选取带有指定属性和指定值的元素
元素[属性~=值]用于选取属性值中包含指定值的元素，该值必须是整个单词，前后可以空格
元素[属性|=值用于选取带有以指定值开头的属性值的元素，该值必须是整个单词或者后面跟着连字符“-”
<head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <title>属性选择器</title>
        <style type="text/css">
            td[lang] {
                color: red;
            }

            td[title="a"] {
                color: red;
            }

            td[title~="c"] {
                color: red;
            }

            td[title|="h"] {
                color: red;
            }
        </style>
    </head>
    <body>
        <big><b>有lang属性的td元素会被选择</b></big>
        <table border="1">
            <tr>
                <td>th[lang]</td>
                <td>无属性</td>
                <td lang="">lang=""</td>
                <td lang="en">lang="en"</td>
                <td lang="cn">lang="cn"</td>
            </tr>
        </table>
        <br />
        <big><b>title属性值为a的td元素会被选择</b></big>
        <table border="1">
            <tr>
                <td>[title="a"]</td>
                <td>无属性</td>
                <td title="a">title="a"</td>
                <td title="a b">title="a b"</td>
                <td title="ab">title="ab"</td>
                <td title="ba">title="ba"</td>
            </tr>
        </table>
        <br />
        <big><b>title属性值包含“c，且c前后只能有空格”的td元素会被选择</b></big>
        <table border="1">
            <tr>
                <td>[title~="c"]</td>
                <td>无属性</td>
                <td title="c">title="c"</td>
                <td title="c d">title="c d"</td>
                <td title="c-d">title="c-d"</td>
                <td title="cd">title="cd"</td>
                <td title="d c">title="d c"</td>
                <td title="dc">title="dc"</td>
            </tr>
        </table>
        <br />
        <big><b>title属性值为“h开头，且h只能为独立单词，后面可跟连字符”的td元素会被选择</b></big>
        <table border="1">
            <tr>
                <td>[title|="h"]</td>
                <td>无属性</td>
                <td title="h">title="h"</td>
                <td title="h i">title="h i"</td>
                <td title="h-i">title="h-i"</td>
                <td title="hi">title="hi"</td>
                <td title="i h">title="i h"</td>
                <td title="i h j">title="i h j"</td>
            </tr>
        </table>
     </body>

在这里插入图片描述
2.4 派生/上下文选择器
派生选择器是根据元素在其位置的上下文关系定义样式，分为：
2.4.1 后代选择器
后代选择器可以选择某元素的后代，后代选择器中两个元素之间的间隔可以是无限的。

<head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <title>后代选择器</title>
        <style type="text/css">
            h1 em {
                color: red;
            }
        </style>
    </head>
    <body>
        <h1><em>HTML</em>基础</h1>
        <p><em>HTML</em>，超文本标记语言（HyperText Markup Language，简称HTML）。</p>
    </body>

在这里插入图片描述
2.4.2 子元素选择器
子元素选择器只能选择作为某元素子元素的元素，与后代元素选择器不同之处在于子元素选择器只有相对于父元素的第一级子元素符合条件。

 <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <title>子元素选择器</title>
        <style type="text/css">
            p>em {
                color: red;
            }
        </style>
    </head>
    <body>
        <p><abbr title="HyperText Markup Language"><em>HTML</em></abbr>，超文本标记语言，简称<em>HTML</em>。</p>
    </body>

在这里插入图片描述
第一个<em>元素作为第二级子元素，不符合子元素选择器的条件，所以没有变成红色字体。

2.4.3 相邻兄弟选择器
相邻兄弟选择器可以选择紧接在另一元素后的元素，且二者有相同的父元素。

 <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <title>相邻兄弟选择器</title>
        <style type="text/css">
            h1+p {
                color: red;
            }
        </style>
    </head>
    <body>
        <h1>HTML基础</h1>
        <p>HTML，超文本标记语言（HyperText Markup Language，简称HTML）。</p>
        <p>HTML文档就是我们所说的网页，是互联网中最重要的信息交流媒体。</p>
    </body>

在这里插入图片描述
可以看到，与<h1>标签相邻的<p>元素符合条件，所以变成红色字体。而第二个<p>元素因为没有与<h1>相邻，所以不满足选择条件。
派生选择器也可以结合使用，例如：html>body h1+p 表示选择<html>的子元素<body>的后代元素<h1>的相邻元素<p>。

2.5 id选择器
id选择器可以为标有特定的id值的HTML元素指定样式。严格来讲在一份 HTML 文档中, id 值都是唯一的,因为如果出现了两个相同的id值, javaScript 只会取第一个具有该id值的元素。id 值通常是以字母开始的，中间可以出现数字、‘-‘和‘_’等。如果用数字开头，某些 XML 解析器会出现问题, id 值不能出现空格,因为这在 JaviScript 中不是一个合法的变量名，同样， name 、class 等属性值的书写规范与id值是一样的，不同的是它们不具备唯一性。
由于id的唯一性，因此通常会将E省略。 id 选择器虽然已经很明确地选择了某元素，但它依然可以用于其他选择器。例如，用在派生选择器中，可以选择该元素的后代元素或者子元素等。

 <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <title>id选择器</title>
        <style type="text/css">
            #p_title,
            #p_content abbr {
                color: red;
            }
        </style>
    </head>
    <body>
        <p id="p_title">HTML基础</p>
        <p id="p_content"><abbr title="HyperText Markup Language">HTML </abbr>，超文本标记语言。HTML文档就是我们所说的网页，是互联网中最重要的信息交流媒体。</p>
    </body>

在这里插入图片描述
2.6 类选择器
类选择器可以为指class的HTML元素指定样式。
class属性值除了不具有唯一性，其他规范与id值相同，即通常是以字母开头的，值不能出现空格。类选择器也可以配合派生选择器，与id选择器不同的是，元素可以基于它的类而被选择。

 <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <title>类选择器</title>
        <style type="text/css">
            .important {
                color: red;
            }

            p.important {
                color: blue;
            }
        </style>
    </head>
    <body>
        <h1 class="important">HTML的历史</h1>
        <p>HTML（第一版）：在1993年6月作为互联网工程工作小组（IETF）工作草案发布</p>
        <p>HTML 2.0：1995年11月作为RFC 1866发布。</p>
        <p>HTML 3.2：1997年1月14日，W3C推荐标准。</p>
        <p>HTML 4.0：1997年12月18日，W3C推荐标准。</p>
        <p class="important">HTML 4.01：1999年12月24日，W3C推荐标准，是现在开发者广泛使用的版本</p>
    </body>

在这里插入图片描述
2.7 伪类选择器
在选取元素时，CSS除了可以根据元素名、id、class 、属性选取元素，还可以根据元素的特殊状态选取元素，即伪类选择器和伪元素选择器。
伪类是指那些处在特殊状态的元素。伪类名可以单独使用，泛指所有元素，也可以和元素名称连起来使用，特指某类元素。伪类以冒号(:)开头，元素选择符和冒号之间不能有空格，伪类名中间也不能有空格。

伪类名含义
:active向被激活的元素添加样式
:focus向拥有输入焦点的元素添加样式
:hover向鼠标悬停在上方的元端添加样式
:link向未被访问的链接添加样式
:first-child向元素添加样式,且该元素是它的父元素的第一个子元素
:visited向己被访问的链接添加样式
:lang带有指定lang属性的元素添加样式
 <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <title>CSS伪类</title>
    </head>
    <style type="text/css">
        a:link {
            font-size: 20px;
        }

        a:hover {
            color: red;
        }
        /* 鼠标停在网址上会网址变红 */

        a:active {
            font-size: 30px;
        }
        /*"http://www.sina.com"被激活时字体变大  */
        

        input:focus {
            background-color: yellow;
        }
        /* 密码输入框获取焦点时背景变成黄色 */

        li:first-child {
            font-size: 30px;
        }
    </style>
    <body>
        <a href="http://www.baidu.com">www.baidu.com</a>
        <br />
        <a href="http://www.sohu.com">www.sohu.com</a>
        <br />
        <a href="http://www.sina.com">www.sina.com</a>
        <br />
        <form action="login" method="post">
            用户名：<input type="text" name="username" id="username" value="" /> <br />
            密码：<input type="password" name="password" id="password" value="" />
        </form>
        <ul>
            <li>吃</li>
            <li>喝</li>
            <li>玩</li>
            <li>乐</li>
        </ul>
        <ul>
            <li>太平洋</li>
            <li>大西洋</li>
            <li>北冰洋</li>
            <li>印度洋</li>
        </ul>
    </body>

2.8 伪元素选择器
伪元素是指那些元素中特别的内容，与伪类不同的是，伪元素表示的是元素内部的东西，逻辑上存在，但在文档树中并不存在与之对应关联的部分。伪元素选择器的格式与伪类选择器一致，在 CSS中常用的伪元素如下表所示

伪元素名含义
:first-letter向文本的第一个字母添加样式
:first-line向文本第一行添加样式
:after向元素之后添加样式
:before向元素之前添加样式
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/ html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <title>CSS伪元素</title>
    </head>
    <style type="text/css">
        p:first-child:first-letter {
            color: #ff55ff;
            font-size: xx-large;
        }

        p:first-child:first-line {
            color: #0000ff;
            font-variant: small-caps;
        }
        
        div:first-line{
            color: #55aaff;
            font-variant: small-caps;
        }
		/*border-radius:给div元素添加圆角的边框*/
		div{
			background-color: #ffff7f;
			border-radius: 100px;
		}

        h1:before {
            content: url(https://www.baidu.com/img/flexible/logo/pc/result@2.png);
        }

        h2:after {
            content: url(https://www.baidu.com/img/flexible/logo/pc/result@2.png);
        }
    </style>
    <body>
        <p>北京欢迎你</p>
        <p>北京欢迎你</p>
        <div>
            北京欢迎你<br/>
            北京欢迎你
        </div>
		<hr />
        <h1>百度</h1>
        <h2>百度</h2>
    </body>
</html>

在这里插入图片描述

su_LinCheng
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
wiznote-windows-x86-2021-06-09.exe
06-22
为知笔记windows客户端
NBA 2021-2022 赛季 阵容（2021.09.06）G--69页.pdf
09-06
【NBA 2021-2022 赛季 阵容解析】 在2021-2022赛季的NBA，各支球队都在进行阵容调整，以提升竞争力。以下是对布鲁克林篮网和密尔沃基雄鹿两支球队主要阵容变化的分析。 首先，我们关注布鲁克林篮网。球队的核心是...
css 选择器的小结
diliangxun2512的博客
01-23 75
css 选择器： 　　派生选择器、id选择器、类选择器、属性选择器 派生选择器： 　　1、后代选择器（包含选择器） 　　　　eg： 以下两个h1里的所有em的字体颜色都改为red h1 em { font-color: red; } <h1> asdas </h1> <h1> ...
html语言里id是什么意思,HTML中id属性的有效值是什么？
weixin_39669761的博客
05-30 1320
繁华开满天机HTML5：ID和类属性的允许值从HTML5开始，对ID值的唯一限制是：必须在文档中是唯一的不得包含任何空格字符必须包含至少一个字符类似的规则适用于类(当然，除了唯一性)。所以值可以是所有数字，只有一位数，只是标点字符，包括特殊字符，等等。只是没有空格。这与HTML4非常不同。在HTML 4中，ID值必须以字母开头，然后只能使用字母，数字，连字符，下划线，冒号和句点。在HTML5中，这...
WEB前端(3)—— 初识CSS
qq_46187519的博客
08-10 385
什么是CSS CSS，英文全称是Cascading Style Sheets,中文名为级联样式单，也有人称其为层叠样式单。层叠就是样式可以层层叠加，可以对一个元素多次设置样式，后面定义的样式会对前面定义的样式进行重写，在浏览器中看到的效果是使用最后一次设置的样式。CSS是一种表现语言，是对网页结构语言的补充。CSS主要用于网页的风格设计，包括字体，颜色，位置等方面的设计。在HTML网页中加入CSS，可以使网页展现更丰富的内容。 ...
html中有两个相同id的元素
weixin_43939111的博客
08-18 2292
从原则上来讲，html中id名称是唯一的，但在平时做项目中发现，出现相同的id值并不会报错，以下总结两个特点： 根据id设置的css样式同样会显现。 根据id触发元素事件，只有第一个元素有效
css选择器
qq_60332750的博客
09-26 93
什么是选择器呢？ 每一条css样式定义由两部分组成，形式如下： [code] 选择器{样式} [/code] 在{}之前的部分就是“选择器”。 “选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素。 类别选择器 类选择器根据类名来选择前面以”.”来标志，如： .demoDiv{ color:#FF0000; } 在 HTML中，元素可以定义一个class的属性。 标签选择器 一个完整的HTML页面是有很多不同的标签组成，而 标签选择器，则是决定哪些标签采用相应的CSS样式，(在大
2021-01-06
qq_40504996的博客
01-06 853
运行机某个js文件访问不了。做了过滤器，没有被过滤的。其他js文件都可以。就单独一个403。考虑是否是防火墙做了一些敏感词的判断过滤。 将js文件名修改试一下，或者从防火墙那方面做文章 ...
eclipse-java-2021-06-R-win32-x86_64
07-10
【标题】"eclipse-java-2021-06-R-win32-x86_64" 提供的是Eclipse IDE（集成开发环境）的一个特定版本，专为Java开发者设计，适用于Windows操作系统32位x86_64架构。这个版本是在2021年6月发布的，通常称为R版本，...
最新完整版标准 UL 6703-2021-06-09.pdf
04-12
最新完整版标准 UL 6703-2021-06-09.pdf
基于KG的认知智能中台----构建及产业化实践[2021-06-09]（62页）.pdf
05-21
基于KG的认知智能中台----构建及产业化实践[2021-06-09]（62页）.pdf
2021-11-09 09-06-42.mp4
03-25
2021-11-09 09-06-42.mp4
kk 2021-06-08 09-53-24.mp4
06-08
91谷歌视频设置
读卡和电子凭证动态库2021-09-06）.rar
12-03
这个名为“读卡和电子凭证动态库2021-09-06）.rar”的压缩包文件似乎包含了与C#编程语言相关的资源，用于封装国家医保供PB（可能是指Progress BusinessBuilder）调用。下面我们将深入探讨这些关键知识点。 首先，...
HTML中的重复ID问题
热门推荐
u013891299的专栏
03-05 2万+
我们通常认为在同一个文档中元素的ID是唯一的，至少从逻辑上它应该是唯一的。传统的网页确实没有ID重复的必要，但现代Web中还有单页面的架构，模块是动态加载的，他们全都在同一个文档中，因此ID重复就很难避免。所以有时候，我们要视ID为非唯一的。 　　通过ID获取元素最常用的方法就是getElementById，但这个方法显然是单数的，它永远都只能获取到一个元素，如果页面存在多个ID相同的元素，它只
CSS的两个特性(1+XWeb证书个人整理)
qq_44948696的博客
11-18 836
第一个特性是"层叠"： 也就是说一个HTML文档可能会使用多CSS样式单，细化到某元素来说，会层叠多层样式单，但生效的总会有一个顺序，即样式生效优先级如下 内联样式—内部样式—外部样式—浏览器效果 第二个特性是"继承"： 继承指的是特定的CSS属性可以从父元素向下传递到子元素 ...
CSS基础-伪类
seamanwang的博客
05-24 620
CSS伪类，重点是before,after
eclipse-jee-2022-09-R-win32-x86-64.zip
10-13
开始使用Eclipse JEE 2022-09 R，首先需要下载"eclipse-jee-2022-09-R-win32-x86_64.zip"压缩包，解压后运行“eclipse.exe”。初次启动，用户需要配置工作空间，选择Java开发工具，以及根据项目需求添加服务器...
结果是这样的，没有根据id排：start_date end_date 0 2020-01-15 2020-04-27 1 2020-09-30 2020-10-10 2 2021-02-07 2021-02-22 3 2021-03-06 2021-03-24 4 2020-01-21 2020-03-03 .. ... ... 639 2021-03-09 2021-03-18 640 2021-03-24 2021-04-01 641 2020-01-12 2020-04-19 642 2021-02-09 2021-02-18 643 2020-01-18 2020-03-09
最新发布
06-03
如果你想根据企业id对结果进行排序，可以在输出结果之前加上一行代码： ```python result = result.sort_values(by=['id']) ``` 此代码将会根据id对结果进行排序，使得每个企业的结果排在一起。完整的代码如下： ```python mean = DataFrame.groupby(['id'])['amount'].mean() # 列出每个企业用电量低于均值时间超过一周的时间段，标记起始时间和结束时间，省略中间时间 filtered_data = DataFrame[DataFrame['amount'] < DataFrame['id'].map(mean)] filtered_data['date'] = pd.to_datetime(filtered_data['date']) filtered_data['diff'] = filtered_data.groupby('id')['date'].diff().dt.days filtered_data['period'] = (filtered_data['diff'] > 1).cumsum() # 找出连续时间段，并计算起始时间和结束时间 result = filtered_data.groupby(['id', 'period']).agg(start_date=('date', 'min'), end_date=('date', 'max')) result = result[result['end_date'] - result['start_date'] > pd.Timedelta(days=7)].reset_index(drop=True) # 根据id排序输出结果 result = result.sort_values(by=['id']) print(result) ``` 输出结果将会按照企业id进行排序。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值