文档章节

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

o
 osc_wna7tzts
发布于 2019/04/10 10:10
字数 2103
阅读 86
收藏 0

「深度学习福利」大神带你进阶工程师,立即查看>>>

<center> CSS(1)---css语法、css选择器 </center>

<font color=#FFD700> 一、CSS语法</font>

1、CSS语法

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

<img src="https://img2018.cnblogs.com/blog/1090617/201910/1090617-20191030221134804-1398437910.jpg" style="border: 1px dashed rgb(204, 200, 200);" width="600" height="160">

属性 是您希望设置的 样式属性。每个属性有一个属性值。属性和属性值被<strong style="color:#f00">冒号</strong>分开。

示例

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

<br>

<font color=#FFD700>二、CSS三种引入方式</font>

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、三者比较

<img src="https://img2018.cnblogs.com/blog/1090617/201910/1090617-20191030221150652-1802506333.png" style="border: 1px dashed rgb(204, 200, 200);" width="600" height="125">

<br> ## <font color=#FFD700>三、CSS基础选择器</font>

基础选择器可以分为: 标签选择器类选择器 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;                   /* 定义内边距*/
}

<br>

<font color=#FFD700> 四、CSS复合选择器</font>

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

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

1、交集选择器

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

基本语法

<img src="https://img2018.cnblogs.com/blog/1090617/201910/1090617-20191030221319585-674278672.jpg" style="border: 1px dashed rgb(204, 200, 200);" width="600" height="125">

示例

<!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 这三个选择器都会执行颜色为红色。 通常用于集体声明。

<img src="https://img2018.cnblogs.com/blog/1090617/201910/1090617-20191030225119893-206090281.png" style="border: 1px dashed rgb(204, 200, 200);" width="600" height="125">

示例

<!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、后代选择器

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

<img src="https://img2018.cnblogs.com/blog/1090617/201910/1090617-20191030225237754-2025371781.png" style="border: 1px dashed rgb(204, 200, 200);" width="600" height="125">

示例

<!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、子元素选择器

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

<img src="https://img2018.cnblogs.com/blog/1090617/201910/1090617-20191030225549812-693779744.png" style="border: 1px dashed rgb(204, 200, 200);" width="600" height="125">

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

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

示例

<!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、相邻兄弟选择器

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

<img src="https://img2018.cnblogs.com/blog/1090617/201910/1090617-20191030225454962-873692221.png" style="border: 1px dashed rgb(204, 200, 200);" width="600" height="125">

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

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

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

6、 伪类选择器

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

<img src="https://img2018.cnblogs.com/blog/1090617/201910/1090617-20191030221520730-1074208895.jpg" style="border: 1px dashed rgb(204, 200, 200);" width="600" height="125">

为了和我们刚才学的类选择器相区别, 类选择器是一个点 比如 .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>

<br>

###<font color=#FFD700>参考</font>

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

1、w3school-CSS 教程

2、CSS 选择器参考手册 <br> <br>

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

原文出处:https://www.cnblogs.com/qdhxhz/p/11768248.html

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
我的架构演化笔记 功能1: 基本的用户注册

“咚咚”,一阵急促的敲门声, 我从睡梦中惊醒,我靠,这才几点,谁这么早, 开门一看,原来我的小表弟放暑假了,来南京玩,顺便说跟我后面学习一个网站是怎么做出来的。 于是有了下面的一段...

强子哥哥
2014/05/31
976
3
CSS Browser Selector

CSS Browser Selector 是一个小的 JS 库,可增强 CSS 的选择器功能,支持根据不同的操作系统和浏览器来编写指定的 CSS 代码,可检测浏览器、浏览器版本、平台、平台版本、设备、设备版本、m...

匿名
2013/01/17
2.9K
1
Web开发组件管理器--Bower

Bower 是一个针对Web开发的包管理器。该工具主要用来帮助用户轻松安装CSS、JavaScript、图像等相关包,并管理这些包之间的依赖。 功能有些类似于Component。不同之处是,Component是围绕Git...

匿名
2013/02/01
1.2W
2
网页抓取工具 --pyrailgun

这是一个非常简单易用的抓取工具 怎么使用? 首先你需要创建一个对应站点的规则文件 比如test.json { } 然后在代码里面把它作为一个任务加入到railgun from railgun import RailGun railgun =...

baizhongwei
2013/02/28
7.8K
0
JS框架--Cyer

Cyer是一个轻量、小巧的js框架,精简易懂的API设计,支持链式调用,有点jQuery的味道。核心部分为选择器(selector)、dom操作、event机制。暂不支持animate功能。版本更新到v1.0.3,增加domRe...

黄昌运
2013/03/06
2.1K
0

没有更多内容

加载失败,请刷新页面

加载更多

Hystrix核心原理和断路器源码解析

Hystrix运行原理 构造一个HystrixCommand或HystrixObservableCommand对象 执行命令。 检查是否已命中缓存,如果命中直接返回。 检查断路器开关是否打开,如果打开,直接熔断,走fallback逻辑...

xiaolyuh
58分钟前
10
0
求职应聘,如何自我分析人格优势?

“你那里有没有合适的工作介绍给我啊?” “我想找份我喜欢的工作,可是好难啊怎么办啊?” “为什么我求职总是不成功呢?” 最近我总是接到朋友询问工作相关的消息,给她们提供招聘信息的同...

蛤蟆丸子
今天
17
0
Pycharm、Idea、Goland 官方汉化来了

作为软件开发的编辑器,不得不提大名鼎鼎的 JetBrains 公司,其出品的软件:Pycharm、Idea、WebStorm、phpstorm、CLion、RubyMine、AppCode、DataGrid,目前来讲都是最受欢迎的! 可是由于软...

猪哥66
今天
18
0
数据分析师必学第一课:构建完整的指标体系

本文分享自微信公众号 - 大数据架构师专家(xinsz08)。 如有侵权,请联系 support@oschina.cn 删除。 本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。...

致码高胜寒
今天
10
0
B站牛逼的实时弹幕系统架构是如何实现的

点击上方 “Java架构师社区”关注我们,设为星标 回复"架构师"获取资源 前言:随着直播的发展,直播弹幕也逐渐火爆起来。在架构设计上,高稳定、高可用、低延迟是一款直播弹幕系统必备的三要素...

Java架构师历程
今天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部