CSS（Cascading Style Sheet，层叠样式表）——第一篇（CSS选择器及引入篇）

最新推荐文章于 2023-03-06 16:34:48 发布

Galaksen

最新推荐文章于 2023-03-06 16:34:48 发布

阅读量359

点赞数

分类专栏：学习笔记文章标签： CSS

本文链接：https://blog.csdn.net/qq_41857060/article/details/88694186

版权

学习笔记专栏收录该内容

37 篇文章 2 订阅

订阅专栏

1.CSS介绍

CSS属于动态HTML技术，它扩充了HTML的标记属性，使得页面显示效果更加丰富，表现效果更加灵活，它与div的配合使用可以很好地对页面进行分割和布局。CSS对页面元素、布局等能够更加精确控制，同时能够实现内容和表现的分离，使得网站的设计风格趋向统一、维护更加容易。

2.CSS基础语法

selector{
        property:value;
        }
selector：选择器
property：属性
value：属性值

每个属性/属性值对用分号（;）隔开例：h1{color:red;font-size:14px;}
复合属性例：p{font-style:italic;font-size:20px;font-family:黑体;} 可以直接使用p{font:intalic 20px 黑体;}表示
多个属性值用逗号（,）隔开，按出现的先后顺序优先选择例：p{font-family:"sans serif";"黑体";"宋体";}
注释 /* */

3.CSS选择器（参考w3school）

3.1 元素（标记）选择器

使用HTML标记名称作为选择器，它定义的样式将作用于该页面中所有与选择器同名的标记

例：

p{color:gray;}
段落文本将显示为灰色

3.2 选择器分组

1.希望对风格相同的多个CSS选择器同时声明（用“,”分隔多个选择器）

例：

h1,h2,p{color:gray;}
以上元素修饰的内容都会显示为灰色

2.希望对页面中的所有标记都使用同一种CSS样式，可使用通配符选择器（仅用一个“*”）

例：

*{
    color:red;
    margin:0px;
    padding:0px;
}
使页面中的每个元素都为红色，通配符选择器中常令margin、padding为0px
有另外需要时另外设置：（就可以使本页面中的p标记显示下列定义样式）
p{
   color:blue;
   margin:10px;
   padding:5px;
}

3.3 类选择器

class属性用于定义页面上的HTML元素标记组，这些标记组通常具有同样的功能或作用，因此它们可以设置相同的样式规则

1、类选择器允许以一种独立与文档元素的方式来指定样式

先创建类，建议以描述性名称命名，便于维护和协同开发。class="类名称"，如果是多个类要用空格分隔

<ol type="A">
    <li class="c1">星期一</li>
    <li class="c2 c3">星期二</li>
</ol>

设置class属性后，类选择器由点号“.”+类名称构成：

.c1{color:red;}
.c2{color:blue;}

运行结果：

2、与元素选择器联合使用

<div class="div">
    hello div
</div>
<a class="div">
    hello a
</a>
为了设置"div"类中的<a>标记：
a.div{color: green;}

运行结果：

3、多类选择器

<p class="p1">One page</p>
<p class="p2">One page</p>
<p class="p1 p2">One page</p>
CSS样式：
.p1{font-family: Algerian;}
.p2{font-size:20px;}
.p1.p2{color: cornflowerblue;}//在有类p1、p2的样式基础上，又加上自身的样式

运行结果：

3.4 ID选择器

ID选择器类似于类选择器，但也有些重要差别

<div id="mydiv">
    ID选择器
</div>
ID选择器由“#”+ID名称相连构成：
#mydiv{color: cornflowerblue;}

运行结果：

ID选择器和类选择器的区别：

ID只能在文档中使用一次，而类可以多次使用
ID选择器不能结合使用
当使用js的时候，需要用到id

3.5 属性选择器

属性选择器可以根据元素的属性及属性值来选择元素

3.5.1 简单属性选择

选择有某个属性的元素，而不管属性值是什么

1.把包含属性title的所有元素变为红色
*[title]{color:red;}
<h2 title="Hello world">Hello world</h2>

2.只对有href属性的a元素应用样式
a[href]{color:red;}
<a href="">Hello world</a>

3.还可以根据多个属性进行选择，只需将属性选择器链接在一起即可
将同时有href和title属性的a元素应用样式
a[href][title] {color:red;}
<a title="" href="">Hello world</a>

特例：

提示：上面这个特例更适合用来诊断而不是设计，即用来确定图像是否确实有效。

3.5.2 根据具体属性值选择

进一步缩小范围，只选择有特定属性值的元素

1.a[href="http://www.baidu.com"] {color: red;}
<a href="http://www.baidu.com">百度</a> 超链接文本“百度”将显示为红色
<a href="http://www.baibai.com">百度</a> 将不应用样式

2.把多个属性-值选择器链接在一起
a[href="http://www.baibai.com"][title="百度"] {color: red;}
<a href="http://www.baibai.com" title="百度">百度</a> 超链接文本“百度”将显示为红色

请注意，这种格式要求必须与属性值完全匹配

3.5.3 根据部分属性值选择

如果需要根据属性值中的词列表的某个词进行选择，则需要使用波浪号（~）

选择属性中属性值包含important的p元素应用样式
p[class~="important"]{color: red;}
可以应用样式：
<p class="important warning">This is a paragraph.</a>
<p class="important">This is a paragraph.</a>

子串匹配属性选择器：

3.5.4 特定属性选择类型

用于选取带有以指定值开头的属性值的元素，该值必须是整个单词，这种属性选择器最常见的用途还是匹配语言值

*[lang|="en"] {color: red;}
上面这个规则会选择 lang 属性等于 en 或以 en- 开头的所有元素
比如以下例子：
<p lang="en">Hello!</p>
<p lang="en-us">Hello!</p>
<p lang="en-au">Hello!</p>

3.6 后代选择器

后代选择器可以选择作为某元素后代的元素

h1 em {color:red;}
会把作为 h1 元素后代的 em 元素的文本变为红色
<h1>This is a <em>important</em> heading</h1> -->important变红
<p>This is a <em>important</em> paragraph.</p> -->important不变

应用：

注意：两个元素之间的层次间隔可以是无限的

例如，如果写作 ul em，这个语法就会选择从 ul 元素继承的所有 em 元素，而不论 em 的嵌套层次多深

3.7 子元素选择器

只选择某个元素的子元素，相较于后代选择器缩小了范围，子元素选择器使用“>”（子结合符，两边可以有空白符）

h1>strong {color:red;}
选择只作为h1元素子元素的strong元素应用
<h1>This is <strong>very</strong> <strong>very</strong> important.</h1> -->两个very变红
<h1>This is <em>really <strong>very</strong></em> important.</h1> -->没有改变

结合后代选择器和子选择器：

table.company td > p{color:red;}
选择作为td元素（本身从table元素继承，该table元素有一个属性值为company的class属性）子元素的所有p元素

<table border="1" class="company">
<tr>
  <td><p>example</p></td>
</tr>  
</table>
example变红

3.8 相邻兄弟选择器（不常用，了解）

选择紧接在另一元素后的元素，且二者有相同父元素，相邻兄弟选择器使用了“+”（相邻兄弟结合符，两边可以有空白符）

https://www.cnblogs.com/hanmk/p/9062084.html

3.9 伪类

CSS 伪类用于向某些选择器添加特殊的效果

提示：

在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
伪类名称对大小写不敏感。
顺序：a:link>a:visited>a:hover>a:active

举例：http://www.w3school.com.cn/css/css_pseudo_classes.asp

3.10 伪元素

CSS 伪元素用于向某些选择器设置特殊效果

举例：http://www.w3school.com.cn/css/css_pseudo_elements.asp

4.引入CSS

4.1 行内样式表

CSS规则写在首标记内，只对所在标记起作用

语法：

<标记 style="属性1:属性值1;属性2:属性值2;...">修饰的内容</标记>

4.2 内部样式表

写在HTML的<head></head>里，只对网页有效。使用<style></style>标记来放置CSS规则

语法：

<style type="text/css">
  选择器1{属性1:属性值1;属性2:属性值2;...}
  ...
  选择器n{属性1:属性值1;属性2:属性值2;...}
</style>

4.3 外部样式表

将CSS规则写在以.css为后缀的CSS文件里，在需要引用此样式的网页里引用该CSS文件

根据引用方式的不同，可分为链接外部样式表和导入外部样式表

4.3.1 链接外部样式表

语法：（写在<head></head>里，但它可以出现任意次数）

<link type="text/css" rel="stylesheet" href="要引入的CSS文件">

4.3.2 导入外部样式表

语法：（写在<style></style>标记内的开头位置，可以导入多个）

<style type="text/css">
  @import url("外部样式表文件1名称");
  ...
  @import url("外部样式表文件n名称");
  选择器1{属性1:属性值1;属性2:属性值2;...}
  ...
  选择器n{属性1:属性值1;属性2:属性值2;...}
</style>

Galaksen

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS（Cascading Style Sheet，层叠样式表）——第一篇（CSS选择器及引入篇）

目录1.CSS介绍2.CSS基础语法3.CSS选择器（参考w3school）3.1 元素（标记）选择器3.2 选择器分组3.3 类选择器3.4 ID选择器3.5 属性选择器3.5.1 简单属性选择3.5.2根据具体属性值选择3.5.3根据部分属性值选择3.5.4特定属性选择类型3.6 后代选择器3.7 子元素选择器3.8相邻兄弟...
复制链接

扫一扫