CSS中的四种样式及选择器
CSS语法
选择符表示要定义样式的对象,可以是元素本身,也可以是一类元素或者制定名称的元素.
属性:属性是指定选择符所具有的属性,它是css的核心,css2共有150多个属性
属性值:属性值包括法定属性值及常见的数值加单位,如25px,或颜色值等。
说明:
1)每个CSS样式由两部分组成,即选择符和声明,声明又分为属性和属性值;
2)属性必须放在花括号中,属性与属性值用冒号连接。
3)每条声明用分号结束。
4)当一个属性有多个属性值的时候,属性值与属性值不分先后顺序。
5)在书写样式过程中,空格、换行等操作不影响属性显示。
四种样式
<head><meta charset="utf-8"><!--外部样式--><link rel="stylesheet" href="../css/demo.css"> <!--内部样式--><style>div{height: 100px;width: 200px;background: red;}</style> <!--外部导入样式表--><style>@import url(../css/demo.css);</style> </head><body><!--内联样式--><div style="height:500px;width:200px;background:pink"></div></body>
复制代码
link和@import的区别
1、本质差别:link是标签,而@import只是CSS提供的一种方式;
2、加载顺序差别:link是css和html文件同时加载,而@import是先加载结构后加载样式;
3、兼容性差别:link的兼容性好,@import只兼容IE5以上版本;
4、dom控制样式时的差别:link加载的样式js的dom可以控制,而@import加载的样式js的dom不能控制。
外部导入样式一般不用
样式权重
内联样式>外部样式=内部样式
内联样式的权重是最高的
内部样式和外部样式的权重和代码的书写顺序有关,谁的书写顺序靠后,谁的权重就高
选择器种类
常用的选择符有十种左右
类型选择符,id选择符,class选择符,通配符,群组选择符,包含选择符,伪类选择符(伪类选择符CSS中已经定义好的选择器,不能随便取名),伪对象选择符(设置在对象后发生的内容。用来和content属性一起使用 )
1) 元素选择符/类型选择符(element选择器 )
语法:元素名称{属性:属性值;}
说明:
a)使用结构中元素(标签)名称作为选择符。例如body、div、p,img,em,strong,span......等。
b)所有的页面元素都可以作为选择符;
用法:
1)如果想改变某个元素得默认样式时,可以使用类型选择符; (如:改变一个div、p、h1样式)
2) 当统一文档某个元素的显示效果时,可以使用类型选择符 (如:改变文档所有p段落样式)
2) id选择器
语法: #id名{属性:属性值;}
说明:
A)当我们使用id选择符时,应该为每个元素定义一个id属性
如:<div id="div1"></div>
B)id选择符的语法格式是“#”加上自定义的id名
如:#box{width:300px; height:300px;}
C) 起名时要取英文名,不能用关键字:(所有的标记和属性都是关键字)
如:head标记
D)id选择器具有唯一性,即一个名称只能对应一个元素。
E) 最大的用处:创建网页的外围结构。
3)class选择器
语法:.class名{属性:属性值;}
说明:
A)当我们使用class选择符时,应先为每个元素定义一个类名称
B)class选择符的语法格式是:"如:<div class="top"></div>"
用法:class选择符更适合定义一类样式;
4)*通配符
语法:{属性:属性值;}
说明:通配选择符的写法是“”,其含义就是所有元素。 用法:常用来重置样式。
5)群组选择器
语法:选择符1,选择符2,选择符3{属性:属性值;}
例如:#box,.header,p,span{color:red;}
说明:当有多个选择符应用相同的样式时,可以将选择符用“,”分隔的方式,合并为一组。
6) 包含选择器
语法:选择符1 选择符2{属性:属性值;}
例如:#box .child p{color:yellow;} 说明:选择符1和选择符2用 空格/>/+/~隔开,含义就是选择符1中包含的所有选择符2;
用法:当我的元素存在父级元素的时候,我要改变自己本身的样式,可以不另加选择符,直接用包含选择器的方式解决。
7) 伪类选择器(伪类选择符)
语法 :
a:link{属性:属性值;}超链接的初始状态;
a:visited{属性:属性值;}超链接被访问后的状态;
a:hover{属性:属性值;}鼠标悬停,即鼠标划过超链接时的状态;
a:active{属性:属性值;}超链接被激活时的状态,即鼠标按下时超链接的状态;
要让他们遵守一个爱恨原则LoVe/HAte,也就是Link--visited--hover--active。
说明:
A)当这4个超链接伪类选择符联合使用时,应注意他们的顺序,正常顺序为:
a:link,a:visited,a:hover,a:active,错误的顺序有时会使超链接的样式失效;
B)为了简化代码,可以把伪类选择符中相同的声明提出来放在a选择符中;
例如:a{color:red;} a:hover{color:green;} 表示超链接的三种状态都相同,只有鼠标划过变颜色。
选择器权重表
转载于:https://juejin.im/post/5d2722caf265da1b6e65ce1b
CSS中的四种样式及选择器相关推荐
- CSS中的三种样式来源:创作人员、读者和用户代理
查看原文:https://www.cnblogs.com/JJJJJKKKKK/articles/4542545.html CSS中的样式一共有三种来源:创作人员.读者和用户代理,来源的不同会影响到样 ...
- CSS中的四种定位方式
在CSS中定位有以下4种: 静态定位 - static 相对定位 - relative 绝对定位 - absolute 固定定位 - fixed 静态定位 - static 静态定位是css中的默认定 ...
- React中的四种样式使用优缺点比较
1.组件化天下下的CSS css的设计就不是为组件化而生的,所以在目前组件化的框架中都在需要一种合适的CSS解决方式. 组件化中选择合适的CSS解决方案应该符合以下条件: 1.可以编写局部的css:c ...
- css的四种样式及其优先级
目录 1.行内样式 代码 2.内嵌样式 代码 3.外链样式 代码 4.导入样式 5.四种样式的优先级 1.行内样式 行内样式又叫标签样式,它是在标签里面加上style属性 代码 <body> ...
- html如何引入css文件?HTML引入外部css文件的四种方法
在学习前端的时候,我们应该知道css给html标记添加各种样式,用来告诉浏览器,因该如何显示这些标记里面的内容.既然css是用来给html添加各种样式的,那么,html中如何引入外部的css文呢?本篇 ...
- CSS中伪元素、伪类选择器和字体、文本相关属性
CSS中伪元素.伪类选择器 伪元素选择器 伪元素选择器只能针对CSS中已有的伪元素起作用. CSS提供的伪元素选择器有如下几个: :first-letter:对指定对象的第一个字符起作用. :firs ...
- html h1转换为行内,css中转换为行内样式的解决方案(css-inline)
聊聊场景 发送邮件 在第三方网站中嵌入HTML 从其他编辑器拷贝编辑好的文章发布到微信.今日头条等自媒体 在以上场景使用行内样式的兼容性要高很多,也可以保持原样式不变 解决方案 这两种方案功能和 Ap ...
- css中的三种基本定位机制
css中的三种基本定位机制 a.普通文档流 b.定位:相对定位 绝对定位 固定定位 c.浮动 1.普通流中,元素位置由文档顺序和元素性质决定,块级元素从上到下依次排列,框之间的垂直距离由框的垂直mar ...
- 后台CS代码中创建四种常用的SL动画效果
http://www.cnblogs.com/chengxingliang/archive/2011/03/07/1974436.html后台CS代码中创建四种常用的动画效果[附带源码实例] 转载于: ...
最新文章
- 【POJ】1308 Is It A Tree?((并查集 + set)or (map))
- 复位最佳方式:异步复位,同步释放
- docker命令大全
- OpenCV图像腐蚀函数erode()的使用
- ASP.NET Core微服务(二)——【ASP.NET Core Swagger配置】
- Qt 设置textEdit插入文本的字体、大小和颜色
- java面试常考_JAVA面试常考系列十
- 华为v5服务器安装操作系统,v5服务器
- 初次使用Atlas JavaScript (Part 3 - 实现自己的应用)
- Android WebView 问题总集
- ARCGIS RUNTIME FOR IOS总结(六)
- win7下如何快速打开便笺或便签实用小工具
- 手机号段199/198/166,横空出世
- Android开发 ANR异常的解决(应用程序无响应)
- MATLAB中round函数的使用
- 第8章 中医证型关联规则挖掘
- (Tiled官方文档翻译)第一节:简介及创建工程、图层集
- node+express+mongodb初体验
- 基于bp神经网络的pid控制,pid神经网络什么原理
- 计算机系统中ram表示什么,ram代表的是什么?