CSS(1)---css语法、css选择器

一、CSS语法

1、CSS语法

CSS 规则由两个主要的部分构成:选择器以及一条或多条声明

属性 是您希望设置的 样式属性。每个属性有一个属性值。属性和属性值被冒号分开。

示例

 <!--  这行代码的作用是将 h1 元素内的文字颜色定义为红色,同时将字体大小设置为 14 像素 -->
h1 {color:red; font-size:14px;}
<!-- 在这里,h1 是选择器,color 和 font-size 是属性,red 和 14px 是值。 -->

二、CSS三种引入方式

CSS三种引入方式有:行内样式内部样式表外部样式表

1、行内样式

它是通过标签的 style属性 来设置元素的样式,

基本语法示例:

<!--使用行内样式引入CSS-->
<body>
<p style="color:blue; font-size:40px">欢迎访问雨点的博客。</p>
</body>

建议 实际在写页面时不提倡使用,在测试的时候可以使用。

2、内部样式表

style标签 中书写CSS代码。style标签写在head标签中。

其基本语法示例:

<head>
<!--使用内部样式表引入CSS-->
<style type="text/css">
div{
background: green;
}
</style>
</head>

3、外部样式表

CSS代码保存在扩展名为.css的样式表中。有两种方式:链接式导入式

基本语法示例:

<head>
<!--链接式:推荐使用-->
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!--导入式-->
<style type="text/css">
@import url("css/style.css");
</style>
</head>

4、三者比较




## 三、CSS基础选择器

基础选择器可以分为: 标签选择器类选择器 id选择器通配符选择器

1、标签选择器

标签选择器(元素选择器)是指用 HTML标签名称 作为选择器,按标签名称分类,为页面中同一类标签指定统一的CSS样式。基本语法示例:

<!-- 示例 这里h1就是标签-->
h1 {color:red; font-size:14px;}

标签选择器最大的优点是能快速为页面中同类型的标签统一样式,同时这也是他的缺点,不能设计差异化样式。

2、类选择器

类选择器使用 .(英文点号)进行标识,后面紧跟 类名

基本语法示例

 <head>
<style type="text/css">
.center {text-align: center}
</style>
</head>

注意:类名的第一个字符不能使用数字!

3、 id选择器

id选择器使用 # 进行标识,后面紧跟id名,其基本语法示例:

 <head>
<style type="text/css">
#red {color:red;}
#green {color:green;}
</style>
</head>

id选择器和类选择器区别

类选择器: 好比人的名字,是可以多次重复使用的。

id选择器: 好比人的身份证号码,是唯一的不能重复。

4、通配符选择器

通配符 选择器用 * 号表示,他是所有选择器中作用范围最广的,能匹配页面中所有的元素。

例如下面的代码,使用通配符选择器定义CSS样式,清除所有HTML标记的默认边距。

* {
margin: 0; /* 定义外边距*/
padding: 0; /* 定义内边距*/
}

四、CSS复合选择器

复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的,目的是为了可以选择更准确更精细的目标元素标签。

复合选择器有:交集选择器、并集选择器后代选择器子元素选择器相邻兄弟选择器伪类选择器

1、交集选择器

交集选择器由两个选择器构成,其中第一个为标签选择器,第二个为class选择器,两个选择器之间不能有空格,如p.className。

基本语法

示例

<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<style>
div.red { /*交集选择器 既要满足是 div 标签 又要满足class叫 red*/
color: red;
}
</style>
</head>
<body>
<div>交集选择器</div>
<div class="red">交集选择器</div> <!-- 只有这个会变红 -->
<p class="red">交集选择器</p>
</body>
</html>

2、并集选择器

并集选择器,只要满足一个就可以。比如 .className, h1 , #id {color: #F00;} 表示 .className 和 h1 和 #id 这三个选择器都会执行颜色为红色。 通常用于集体声明。

示例

<!DOCTYPE html>
<html>
<head>
<title>并集选择器</title>
<style>
/*1. 只要满足其中一个就会变红*/
div, p, span { /*并集选择器 用逗号隔开 */
color: red;
}
</style>
</head>
<body>
<div>并集选择器</div>
<p>并集选择器</p>
<span>并集选择器</span>
<h1>并集选择器</h1> <!-- 只有这一个不会变红 -->
</body>
</html>

3、后代选择器

后代选择器又称为包含选择器,一般标签里面又会包含标签,那么内层标签就为外层标签的后代。

示例

<!DOCTYPE html>
<html>
<head>
<title>后代选择器</title>
<style>
div p { /* 后代选择器 p 一定是 div 的孩子 */
color: red;
}
</style>
</head>
<body>
<div> 后代选择器 </div>
<div>
<p>后代选择器</p> <!-- 只有它变红 -->
</div>
</body>
</html>

4、子元素选择器

子元素选择器只能选择作为某元素子元素的元素。其写法就是把父级标签写在前面,子级标签写在后面,中间跟一个 > 进行连接,注意,符号左右两侧各保留一个空格。

后代选择器跟子元素选择器的区别

后代可以是 亲儿子 、亲孙子 、亲重孙子之类的,而子代只是亲儿子。所以后代选择器的范围更广些。

示例

<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<style>
ul li > a { /*这里表示 ul的后代中的li的亲儿子才会有效 */
color:red;
}
</style>
</head>
<body>
<ul>
<li>
<a href="#">一级菜单</a> <!-- 只有这个是li的亲儿子,所以只有它会变红 -->
<div>
<a href="#">二级菜单</a> <!-- 这三个只是li的后代但并不是亲儿子,所以不会变红 -->
<a href="#">二级菜单</a>
<a href="#">二级菜单</a>
</div>
</li>
</ul>
</body>
</html>

5、相邻兄弟选择器

如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器

例如,如果要增加紧接在 h1 元素后出现的段落的上边距,可以这样写:

h1 + p {margin-top:50px;}

这个选择器读作:“选择紧接在 h1 元素后出现的段落,h1 和 p 元素拥有共同的父元素”。

6、 伪类选择器

伪类选择器用于向某些选择器添加特殊的效果。比如给链接添加特殊效果, 比如可以选择 第1个,第n个元素。

为了和我们刚才学的类选择器相区别, 类选择器是一个点 比如 .className {} 而我们的伪类 用 2个点 就是 冒号 比如 :link{}。

示例

<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<style>
a:link { /* 未访问过的连接状态*/
color: #3c3c3c;
font-size: 25px;
text-decoration: none; /*取消下划线*/
font-weight: 700;
}
a:visited { /*这个链接我们已经点过的样子 已访问过链接*/
color: orange;
}
a:hover { /*鼠标经过连接时候的样子*/
color: #f10215;
}
a:active { /*鼠标按下时候的样子*/
color: green;
} </style>
</head>
<body>
<a href="http://www.oujiong.com">点击</a>
</body>
</html>

参考

有关CSS选择器上面也只是讲了一部分,更多的可以看w3school官方文档。当你需要怎么样的选择器到这里查找就可以。

1、w3school-CSS 教程

2、CSS 选择器参考手册

你如果愿意有所作为,就必须有始有终。(3)

CSS(1)---css语法、css选择器的更多相关文章

  1. CSS学习摘要-语法和选择器

    主要摘自网络开发者. 从最基本的层次来看,CSS是由两块内容组合而成的: 属性(Property):一些人类可理解的标识符,这些标识符指出你想修改哪一些样式,例如:字体,宽度,背景颜色等. 属性值(V ...

  2. CSS的基本语法

        W3School离线手册(2017.03.11版)下载:https://pan.baidu.com/s/1c6cUPE7jC45mmwMfM6598A     CSS(层叠样式表)       ...

  3. CSS 简介、语法、派生选择器、id 选择器、类选择器、属性选择器

    CSS 概述 CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0 中,是为了解决内容与表现 ...

  4. {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性  定位(position)z-index

    前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...

  5. CSS样式之语法

    选择符 选择符 {属性1:属性值1;属性2:属性值2} 选择符(selector):指定样式适用的标签,除指定标签外,样式不起作用 属性:样式的关键字 属性值:描述样式的值: 格式:属性与属性之间使用 ...

  6. css3学习之旅-css的基本语法(1)

    后面就将要介绍css的全面语法: 1.css介绍 2.css基本语法 3.css高级语法 4.css派生选择器 5.css的id选择器 6.css类选择器 7.css属性选择器 !!!!!css介绍 ...

  7. CSS 常见的8种选择器 和 文本溢出问题

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>c ...

  8. web(六)css的基本语法、取值与单位

    css语法包含如下部分: 选择器:用于选择需要添加样式的元素. 属性(property):样式的属性名称,例如color代表颜色. 取值与单位:属性对应的值以及单位. 语法规则:css的某些固定语法. ...

  9. 前端基础之CSS的引入+HTML标签选择器+CSS操作属性

    clear:left/ringt属性 CSS:语法形式上由选择器+以及一条或多条声明组成:选择器查找到指定的html标签后,使用css属性设置html标签的样式:                   ...

  10. CSS选择器之伪类选择器(伪元素)

    selection [CSS4]应用于文档中被用户高亮的部分(比如使用鼠标或其他选择设备选中的部分).(IE8及以下不支持)(火狐-moz-selection) first-line 选择每个 < ...

随机推荐

  1. Java职责链模式

    一.定义 职责链模式,就是将能够处理某类请求事件的一些处理类,类似链条的串联起来.请求在链条上处理的时候,并不知道具体是哪个处理类进行处理的.一定程度上实现了请求和处理的解耦. 实际生活中的经典例子就 ...

  2. 如何编写出高质量的 equals 和 hashcode 方法?

    什么是 equals 和 hashcode 方法? 这要从 Object 类开始说起,我们知道 Object 类是 Java 的超类,每个类都直接或者间接的继承了 Object 类,在 Object ...

  3. FPipe端口转发

    目录 0x01 FPipe介绍 0x02 端口转发 0x03 msf正向上线 注: 边界机器 win08 192.168.222.175 内网机器 win7 192.168.222.137 msf机器 ...

  4. django开发后台接口error 10053/10054

    初学Django,开发完接口之后访问post请求的接口遇到error10053和10054,查阅很多资料没有找到具体的原因. 在这里记录下我遇到这两个报错的原因和解决方案: get请求取请求参数:su ...

  5. Flask基础(15)-->模板代码的复用【宏(Macro)、继承(Block)、包含(include)】

    宏 对宏(macro)的理解: 把它看作 Jinja2 中的一个函数,它会返回一个模板或者 HTML 字符串 为了避免反复地编写同样的模板代码,出现代码冗余,可以把他们写成函数以进行重用 需要在多处重 ...

  6. Kubernetes 系列(三):Kubernetes使用Traefik Ingress暴露服务

    一.Kubernetes 服务暴露介绍 从 kubernetes 1.2 版本开始,kubernetes提供了 Ingress 对象来实现对外暴露服务:到目前为止 kubernetes 总共有三种暴露 ...

  7. Map(映射)

    散列表介绍: 数组和链表都可以是有序的(即存储顺序与取出顺序一致),但这样是有代价的,需要遍历才可以寻找某一特定元素: 而还有另外的一些存储结构:不在意元素的顺序,能够快速的查找元素的数据 其中就有一 ...

  8. [LeetCode] 1137. N-th Tribonacci Number

    Description e Tribonacci sequence Tn is defined as follows: T0 = 0, T1 = 1, T2 = 1, and Tn+3 = Tn + ...

  9. Solidity 编程实例--投票

    Voting 投票 思路是为每张选票创建一个合约,每个投票选项提供一个短名称.合约创建者作为会长将会给每个投票参与人各自的地址投票权. 地址后面的人们可以选择自己投票或者委托信任的代表人替他们投票.在 ...

  10. Spring Boot WebFlux 快速入门实践

    02:WebFlux 快速入门实践 Spring Boot 2.0 spring.io 官网有句醒目的话是: BUILD ANYTHING WITH SPRING BOOT Spring Boot ( ...