CSS的引入方式及CSS选择器
一 CSS介绍
现在的互联网前端分三层:
a.HTML:超文本标记语言。从语义的角度描述页面结构。
b.CSS:层叠样式表。从审美的角度负责页面样式。
c.JS:JavaScript 。从交互的角度描述页面行为
CSS:Cascading Style Sheet,层叠样式表。CSS的作用就是给HTML页面标签添加各种样式,定义网页的显示效果。简单一句话:CSS将网页内容和显示样式进行分离,提高了显示功能。
css的最新版本是css3,我们目前学习的是css2.1
接下来我们要讲一下为什么要使用CSS:
HTML的缺陷:
1.不能够适应多种设备
2.要求浏览器必须智能化足够庞大
3.数据和显示没有分开
4.功能不够强大
CSS 优点:
1.使数据和显示分开
2.降低网络流量
3.使整个网站视觉效果一致
4.使开发效率提高了(耦合性降低,一个人负责写html,一个人负责写css)
比如说,有一个样式需要在一百个页面上显示,如果是html来实现,那要写一百遍,现在有了css,只要写一遍。现在,html只提供数据和一些控件,完全交给css提供各种各样的样式。
二 行内样式
1
2
3
|
<div> <p style = "color: green" >我是一个段落< / p> < / div> |
三 内接样式
1
2
3
4
5
6
7
8
|
<style type = "text/css" > / * 写我们的css代码 * / span{ color: yellow; } < / style> |
四 外接样式
1
|
<link rel = "stylesheet" href = "./index.css" > |
外接样式之导入式
1
2
3
|
<style type = "text/css" > @import url( './index.css' ); < / style> |
五 CSS选择器
css的选择器:1.基本选择器 2.高级选择器
基本选择器包含:
1.标签选择器
标签选择器可以选中所有的标签元素,比如div,ul,li ,p等等,不管标签藏的多深,都能选中,选中的是所有的,而不是某一个,所以说 "共性" 而不是 ”特性“
1
2
3
4
5
6
7
8
9
10
11
12
|
body{ color:gray; font - size: 12px ; } / * 标签选择器 * / p{ color: red; font - size: 20px ; } span{ color: yellow; } |
2.id选择器
# 选中id
同一个页面中id不能重复。
任何的标签都可以设置id
id命名规范 要以字母 可以有数字 下划线 - 大小写严格区分 aa和AA是两个不一样的属性值
1
2
3
4
5
6
7
8
9
10
11
|
#box{ background:green; } #s1{ color: red; } #s2{ font - size: 30px ; } |
3.类选择器
所谓类:就是class . class与id非常相似 任何的标签都可以加类,但是类是可以重复,属于归类的概念。同一个标签中可以携带多个类,用空格隔开
类的使用,能够决定前端工程师的css水平到底有多牛逼?
玩类了,一定要有”公共类“的概念。
1
2
3
4
5
6
7
8
9
10
11
|
.lv{ color: green; } .big{ font - size: 40px ; } .line{ text - decoration: underline; } |
1
2
3
4
5
6
|
<! - - 公共类 共有的属性 - - > <div> <p class = "lv big" >段落 1 < / p> <p class = "lv line" >段落 2 < / p> <p class = "line big" >段落 3 < / p> < / div> |
总结:
1.不要去试图用一个类将我们的页面写完。这个标签要携带多个类,共同设置样式
2.每个类要尽可能的小,有公共的概念,能够让更多的标签使用
到底使用id还是用class?
1
2
3
|
答案:尽可能的用 class 。除非一些特殊情况可以用 id 原因: id 一般是用在js的。也就是说 js是通过 id 来获取到标签 |
六 CSS的高级选择器
后代选择器
子代选择器
并集选择器
交集选择器
后代选择器
使用空格表示后代选择器。顾名思义,父元素的后代(包括儿子,孙子,重孙子)
1
2
3
|
.container>p{ color: yellowgreen; } |
子代选择器
使用>表示子代选择器。比如div>p,仅仅表示的是当前div元素选中的子代(不包含孙子....)元素p。
1
2
3
|
.container>p{ color: yellowgreen; } |
并集选择器
多个选择器之间使用逗号隔开。表示选中的页面中的多个标签。一些共性的元素,可以使用并集选择器
1
2
3
4
5
6
|
/ * 并集选择器 * / h3,a{ color: #008000; text - decoration: none; } |
比如像百度首页使用并集选择器。
1
2
3
4
5
|
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button, input ,textarea,th,td { margin: 0 ; padding: 0 } / * 使用此并集选择器选中页面中所有的标签,页面布局的时候会使用 * / |
交集选择器
使用.表示交集选择器。第一个标签必须是标签选择器,第二个标签必须是类选择器 语法:div.active
比如有一个<h4 class='active'></h4>这样的标签。
那么
1
2
3
4
5
6
7
8
9
10
11
12
|
h4{ width: 100px ; font - size: 14px ; } .active{ color: red; text - decoration: underline; } / * 交集选择器 * / h4.active{ background: #00BFFF; } |
它表示两者选中之后元素共有的特性。
七 CSS的属性选择器
属性选择器,字面意思就是根据标签中的属性,选中当前的标签。
语法:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
1 / * 根据属性查找 * / 2 / * [ for ]{ 3 color: red; 4 } * / 5 6 / * 找到 for 属性的等于username的元素 字体颜色设为红色 * / 7 / * [ for = 'username' ]{ 8 color: yellow; 9 } * / 10 11 / * 以....开头 ^ * / 12 / * [ for ^ = 'user' ]{ 13 color: #008000; 14 } * / 15 16 / * 以....结尾 $ * / 17 / * [ for $ = 'vvip' ]{ 18 color: red; 19 } * / 20 21 / * 包含某元素的标签 * / 22 / * [ for * = "vip" ]{ 23 color: #00BFFF; 24 } * / 25 26 / * * / 27 28 / * 指定单词的属性 * / 29 label[ for ~ = 'user1' ]{ 30 color: red; 31 } 32 33 input [ type = 'text' ]{ 34 background: red; 35 } |
八 CSS的伪类选择器
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
1 / * 没有被访问的a标签的样式 * / 2 .box ul li.item1 a:link{ 3 4 color: #666; 5 } 6 / * 访问过后的a标签的样式 * / 7 .box ul li.item2 a:visited{ 8 9 color: yellow; 10 } 11 / * 鼠标悬停时a标签的样式 * / 12 .box ul li.item3 a:hover{ 13 14 color: green; 15 } 16 / * 鼠标摁住的时候a标签的样式 * / 17 .box ul li.item4 a:active{ 18 19 color: yellowgreen; 20 } |
再给大家介绍一种css3的选择器nth-child()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
/ * 选中第一个元素 * / div ul li:first - child{ font - size: 20px ; color: red; } / * 选中最后一个元素 * / div ul li:last - child{ font - size: 20px ; color: yellow; } / * 选中当前指定的元素 数值从 1 开始 * / div ul li:nth - child( 3 ){ font - size: 30px ; color: purple; } / * n表示选中所有,这里面必须是n, 从 0 开始的 0 的时候表示没有选中 * / div ul li:nth - child(n){ font - size: 40px ; color: red; } / * 偶数 * / div ul li:nth - child( 2n ){ font - size: 50px ; color: gold; } / * 奇数 * / div ul li:nth - child( 2n - 1 ){ font - size: 50px ; color: yellow; } / * 隔几换色 隔行换色 隔 4 换色 就是 5n + 1 ,隔 3 换色就是 4n + 1 * / div ul li:nth - child( 5n + 1 ){ font - size: 50px ; color: red; } |
九 CSS的伪元素选择器
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
/ * 设置第一个首字母的样式 * / p:first - letter{ color: red; font - size: 30px ; } / * 在....之前 添加内容 这个属性使用不是很频繁 了解 使用此伪元素选择器一定要结合content属性 * / p:before{ content: 'alex' ; } / * 在....之后 添加内容,使用非常频繁 通常与咱们后面要讲到布局 有很大的关联(清除浮动) * / p:after{ content: '&' ; color: red; font - size: 40px ; } |
CSS的引入方式及CSS选择器的更多相关文章
- Day46(列表标签,表格标签,表单标签,css的引入方式,css选择器)
一.列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,“无序列表”的意思. li:lis ...
- CSS的引入方式和复合选择器
CSS的引入方式 样式表 优点 缺点 范围 行内样式表 书写方便 结构样式混写 控制一个标签 内部样式表 部分结构和样式相分离 没有彻底 控制一个页面 外部样式表 完全实现结构和样式分离 需要引入 控 ...
- python 全栈开发,Day46(列表标签,表格标签,表单标签,css的引入方式,css选择器)
一.列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,“无序列表”的意思. li:lis ...
- css 引入方式以及css的选择器
一.css的引入方式: 1.行内样式 <div> <p style="color: red">我是一个段落</p> </div> 2 ...
- 11 CSS的三种引入方式和基本选择器
<!-- 整体说明: 1.CSS的三种引入方式 (1)行内样式 (2)内接样式 (3)外接样式 2.CSS的基本选择器 (1)id选择器 (引用方式:#id) (2)标签选择器(引用方式:标签名 ...
- 前端1-----CSS层叠样式表了解,css的引入方式,三大选择器(标签,类,id),高级选择器
前端1-----CSS层叠样式表了解,css的引入方式,三大选择器(标签,类,id),高级选择器 一丶CSS简介 叠样式表(英文全称:Cascading Style Sheets)是一种用来表现 ...
- 前端(二)—— CSS的引入方式、长度与颜色单位、常用样式、选择器
CSS的引入方式.长度与颜色单位.常用样式.选择器 一.CSS的三种引入方式 1.行间式 <!doctype html> <html> <head> <met ...
- day 42 01--CSS的引入方式及CSS选择器
01--CSS的引入方式及CSS选择器 本节目录 一 CSS介绍 二 行内样式 三 内接样式 四 外接样式 五 CSS的选择器 六 CSS的高级选择器 七 CSS的属性选择器 八 CSS的伪类选择 ...
- CSS的引入方式和样式
CSS的引入方式和样式 一.样式 行内样式 内接样式 外接样式(1.链接式 2.导入式) <!--行内样式--> <div> <p style="color: ...
随机推荐
- javascript实现二分法
js 实现数组查找二分法 二分法实现原理:二分查找可以解决已经排好序数组的查找问题:只要数组中包含target(即要查找的值),那么通过不断缩小包含target数组的范围,最终就可以找到它. 其算法流 ...
- centos7 部署YApi
=============================================== 2018/6/5_第2次修改 ccb_warlock 更新说 ...
- 常用的.NET开源项目(转)
Json.NET http://json.codeplex.com/ Json.Net是一个读写Json效率比较高的.Net框架.Json.Net 使得在.Net环境下使用Json更加简单.通过Lin ...
- PIVOT 行列相转
先介绍一下英文释义: pivot 英 ['pɪvət] 美 ['pɪvət] n. 枢轴:中心点:旋转运动 vt. 以…为中心旋转:把…置于枢轴上 vi. 在枢轴上转动:随…转移 adj. 枢轴的: ...
- 自己动手,写一个分布式系统(附c#代码示例)
分布式系统有很多成熟的解决方案.如:微软的WCF.WCF太过于复杂,配置也麻烦.其实可以自己动手设计一个小的分布式系统.系统的原理完全在自己掌握之中,可以根据业务随机而变.这里展示远程调用最核心最基本 ...
- SSE图像算法优化系列二:高斯模糊算法的全面优化过程分享(一)。
这里的高斯模糊采用的是论文<Recursive implementation of the Gaussian filter>里描述的递归算法. 仔细观察和理解上述公式,在forward过程 ...
- 基于vue2.0实现仿百度前端分页效果(一)
前言 最近在接手一个后台管理项目的时候,由于之前是使用jquery+bootstrap做的,后端使用php yii框架,前后端耦合在一起,所以接手过来之后通过vue进行改造,但依然继续使用的boots ...
- HTML5 audio元素如何使用js与jquery控制其事件
前言: 每一次遇见问题想到的就是怎么解决?最好的方法还是查询网络媒体,更好的办法是让自己记忆,只有自己理解到了才真正是属于自己.要做一个订单提醒功能,没有使用audio相关的插件,虽然插件无数,还是喜 ...
- 设计模式-----Builder模式
前言 近日,看到Myabtis中组件中SqlSessionFactory由SqlSessionFactoryBuilder().build()生成时,且采用Builder模式,遂记录学习之. SqlS ...
- Hyperledger Fabric密码模块系列之BCCSP(四)
前面说过要找时间介绍一下bccsp包下面的工厂factory,so here it is. 通过factory目前可以获得两类BCCSP实例,一个是上文说的sw,还有一个是通过pkcs11实现的. B ...