css总结之语法/注释/选择器

最新推荐文章于 2023-12-13 17:58:37 发布

Bran.im

最新推荐文章于 2023-12-13 17:58:37 发布

阅读量256

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/FXX_Bran/article/details/90677730

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

介绍

CSS (Cascading Style Sheet) 层叠样式表，使得网页变的非常的漂亮
语法
每个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。

注释

/* 我是单行注释 */
/* 
我是多行注释 
*/

引入方式

行内样式
直接在标签style属性里写样式，不推荐这样弄

<p style="color: red">Hello world.</p>

内部样式
在head头部style标签内写样式

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            background-color: #2b99ff;
        }
    </style>
</head>

外部样式
在外部建立css样式文件，然后引入

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

css选择器

基本选择器：

元素选择器
```
p {color: "red";}
```
id选择器
```
#nav {
  background-color: red;
}
```

类选择器

.c1 {
  font-size: 14px;
}
p.c1 {
  color: red;
}
<!-- 标签中的class属性如果有多个，要用空格分隔。不能数字开头 -->

通用选择器
```
* {
  margin: 0px;
}
```

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    p {
        color: red;
    }
    #nav {
        background-color: blue;
    }
    .cl {
        font-size: 30px;
    }
    * {
        margin: 0px;
    }
    </style>
</head>
<body>
    <p>这是一个段落，要使用元素选择器</p>
    <p id="nav">这又是一个段落，要使用id选择器</p>
    <span class="cl">这还一个span，要使用类选择器</span>
    <!-- * 通用选择器去除所有元素的外边距 -->
</body>
</html>

基本选择器
组合选择器：

后代选择器

/*li内部的a标签设置字体颜色*/
li a {
 color: green;
}

子选择器

/*选择所有父级是 <div> 元素的 <p> 元素*/
div>p {
 font-family: "Arial Black", arial-black, cursive;
}

相邻选择器

/*选择所有紧接着<div>元素之后的<p>元素*/
div+p {
 margin: 5px;
}

兄弟选择器

/*i1后面所有的兄弟p标签*/
#i1~p {
  border: 2px solid royalblue;
}

属性选择器：

<!-- 常用属性选择器 -->
/*用于选取带有指定属性的元素。*/
p[title] {
  color: red;
}
/*用于选取带有指定属性和值的元素。*/
p[title="213"] {
  color: green;
}

<!-- 不常用属性选择器 -->
/*找到所有title属性以hello开头的元素*/
[title^="hello"] {
  color: red;
}

/*找到所有title属性以hello结尾的元素*/
[title$="hello"] {
  color: yellow;
}

/*找到所有title属性中包含（字符串包含）hello的元素*/
[title*="hello"] {
  color: red;
}

/*找到所有title属性(有多个值或值以空格分割)中有一个值为hello的元素：*/
[title~="hello"] {
  color: green;
}

分组：
如果多个标签都有相同的样式，可以写在一起，标签之间用逗号分隔

div, p {
  color: red;
}

嵌套：

多种选择器可以混合起来使用，比如：.c1类内部所有p标签设置字体颜色为红色。

.c1 p {
  color: red;
}

伪类选择器：

/* 未访问的链接 */
a:link {
  color: #FF0000
}

/* 已访问的链接 */
a:visited {
  color: #00FF00
} 

/* 鼠标移动到链接上 */
a:hover {
  color: #FF00FF
} 

/* 选定的链接 */ 
a:active {
  color: #0000FF
}

/*input输入框获取焦点时样式*/
input:focus {
  outline: none;
  background-color: #eee;
}

伪元类选择器：
first-letter

/*首字母设置特殊样式*/
p:first-letter {
  font-size: 48px;
  color: red;
}

before

/*在每个<p>元素之前插入内容*/
p:before {
  content:"*";
  color:red;
}

after

/*在每个<p>元素之后插入内容*/
p:after {
  content:"[?]";
  color:blue;
}

css伪类/元素

选择器	示例	示例说明
:link	a:link	选择所有未访问链接
:visited	a:visited	选择所有访问过的链接
:active	a:active	选择正在活动链接
:hover	a:hover	把鼠标放在链接上的状态
:focus	input:focus	选择元素输入后具有焦点
:first-letter	p:first-letter	选择每个元素的第一个字母
:first-line	p:first-line	选择每个元素的第一行
:first-child	p:first-child	选择器匹配属于任意元素的第一个子元素的 <]p> 元素
:before	p:before	在每个元素之前插入内容
:after	p:after	在每个元素之后插入内容
:lang(language)	p:lang(it)	为元素的lang属性选择一个开始值

选择器优先级

相同选择器不同的引入方式，就近原则谁近用谁的样式
不同选择器相同的引入方式
行内样式 > id选择器> 类选择器 > 标签选择器
选择器优先级

除此之外还可以通过添加 !important方式来强制让样式生效，但并不推荐使用。因为如果过多的使用!important会使样式文件混乱不易维护。

Bran.im

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css总结之语法/注释/选择器

介绍CSS (Cascading Style Sheet) 层叠样式表，使得网页变的非常的漂亮语法每个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。注释/* 我是单行注释 *//* 我是多行注释 */引入方式行内样式直接在标签style属性里写样式，不推荐这样弄<p style="color: red">Hello ...
复制链接

扫一扫