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: ...
随机推荐
- 基于 Keras 的 LSTM 时间序列分析——以苹果股价预测为例
简介 时间序列简单的说就是各时间点上形成的数值序列,时间序列分析就是通过观察历史数据预测未来的值.预测未来股价走势是一个再好不过的例子了.在本文中,我们将看到如何在递归神经网络的帮助下执行时间序列分析 ...
- Java面试集合(一)
前言 大家好,给大家带来Java面试集合(一)的概述,希望你们喜欢 一 1.Java按应用范围可划分几个版本? 答:Java按应用范围有三个版本,分别是JavaSE,JavaEE,JavaME. 2. ...
- LinkedList 的源码分析
LinkedList是基于双向链表数据结构来存储数据的,以下是对LinkedList 的 属性,构造器 ,add(E e),remove(index),get(Index),set(inde,e)进 ...
- [git] 文件操作
文件操作 1. git add 1.1 将未被git管理的文件添加到暂存区 一次可添加多个文件 文件夹,中间用空格隔开 git add 文件/文件夹 文件/文件夹 再次执行 git sta ...
- 我从来不理解 JavaScript 闭包,直到有人这样向我解释它...
正如标题所述,JavaScript 闭包对我来说一直有点神秘,看过很多闭包的文章,在工作使用过闭包,有时甚至在项目中使用闭包,但我确实是这是在使用闭包的知识. 最近看国外的一些文章,终于,有人用于一种 ...
- UIAutomatorViewer增加xpath查看
原来的UIAutomatorViewer是没有xpath查看路径的,下载如下jar包: https://pan.baidu.com/s/1jpr6m0OOce7CtnDE_lIJ9A 密码:cja0 ...
- Python:SQLMap源码精读—start函数
源代码 def start(): """ This function calls a function that performs checks on both URL ...
- hadoop运行一段时间后无法stop-all的问题
默认配置是将datanode,namenode,jobtracker,tasktracker,secondarynamenode的pid存放在/tmp目录下, 随着linux的定期清理, 这些pid就 ...
- 从零开始学 Web 之 DOM(四)节点
大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...
- jdk8- list操作
本文版权归 远方的风lyh和博客园共有,欢迎转载,但须保留此段声明,并给出原文链接,谢谢合作. student类 public class Student { private String age; ...