css基本介绍
CSS初识
CSS(Cascading Style Sheets)通常被称为CSS样式表或层叠样式表(级联样式表),主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局等外观显示样式。它就是包含一个或多个规则的文本文件。
构造规则
样式表的每个规则都有两个部分,即选择器(selection)和声明(declaration)。
注意
- 选择器用于指定CSS样式作用的HTML对象,花括号内是对该对象设置的具体样式。
- 属性和属性值以“键值对”的形式出现。
- 属性是对指定的对象设置的样式属性,例如字体大小、文本颜色等。
- 属性和属性值之间用英文“:”连接。
- 多个“键值对”之间用英文“;”进行区分。
我们也可以在样式规则中用/*注释内容*/
语法来注释内容。另外,样式会被该元素的后代继承,不过浏览器在解析代码时,只会解析离它最近的样式。
样式表的定义和使用
行内式(内联样式)
基本语法:
<label style="样式属性:属性值;样式属性:属性值;···">
内部样式表
基本语法:
<head>
<style type="text/CSS">
选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
</style>
</head>
外部样式表(外链式)
基本语法:
<head>
<link href="CSS文件的路径" type="text/CSS" rel="stylesheet" />
</head>
说明:
type
:定义所链接文档的类型,在这里需要指定为“text/CSS”,表示链接的外部文件为CSS样式表rel
:定义当前文档与被链接文档之间的关系,在这里需要指定为“stylesheet”,表示被链接的文档是一个样式表文件link
:该标签是一个单标签
或者:
<style type="text/css">
@import url("外部样式表的文件名称")
</style>
选择器
标签选择器(元素选择器)
标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 或者
元素名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
类选择器
.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
不过我们必须在标签里面如下定义:
<label class="类名"></label>
id选择器
#id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
不过我们也要在标签里面如下定义:
<label id="id名"></label>
通配符选择器
* { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
通配符选择器用“*”号表示,它是所有选择器中作用范围最广的,能匹配页面中所有的元素。
伪类选择器
伪类选择器用于向某些选择器添加特殊的效果。比如给链接添加特殊效果, 比如可以选择 第1个,第n个元素。
链接伪类选择器
:link
:未访问的链接:visited
:已访问的链接:hover
:鼠标移动的链接上:active
:选定的链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
a:hover{
color: red;
}
</style>
<body>
<a href="http://www.baudu.com/">百度</a>
</body>
</html>
结构(位置)伪类选择器
:first-child
:选取属于其父元素的首个子元素的指定选择器:last-child
:选取属于其父元素的最后一个子元素的指定选择器:nth-child(n)
: 匹配属于其父元素的第 N 个子元素,不论元素的类型:nth-last-child(n)
:选择器匹配属于其元素的第 N 个子元素的每个元素,不论元素的类型,从最后一个子元素开始计数
目标伪类选择器
:target
目标伪类选择器 :选择器可用于选取当前活动的目标元素
复合选择器
交集选择器
我们直接把需要交集的选择器连在一起,如:
<style>
p.class#id{
...
}
</style>
并集选择器
在选择器的中间加上逗号:
<style>
p,.class,#id{
...
}
</style>
后代选择器
后代选择器又称为包含选择器,用来选择元素或元素组的后代,其写法就是把外层标签写在前面,内层标签写在后面,中间用空格分隔。
<style>
p .class #id{
...
}
</style>
子元素选择器
子元素选择器只能选择作为某元素子元素的元素。其写法就是把父级标签写在前面,子级标签写在后面,中间跟一个 >
进行连接,注意,符号左右两侧各保留一个空格。
<style>
.demo > h3 {color: red;}
</style>
属性选择器
选取标签带有某些特殊属性的选择器 我们成为属性选择器
/* 获取到 拥有 该属性的元素 */
div[class^=font] { /* class^=font 表示 font 开始位置就行了 */
color: pink;
}
div[class$=footer] { /* class$=footer 表示 footer 结束位置就行了 */
color: skyblue;
}
div[class*=tao] { /* class*=tao *= 表示tao 在任意位置都可以 */
color: green;
}
伪元素选择器
E::first-letter
文本的第一个单词或字(如中文、日文、韩文等)E::first-line
文本第一行;E::selection
可改变选中文本的样式;E::before
和E::after
:在E元素内部的开始位置和结束位创建一个元素,该元素为行内元素,且必须要结合content属性使用;
标签选择模式
块级元素(block-level)
每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度、高度、对齐等属性,常用于网页布局和网页结构的搭建。
特点:
- 独占一行
- 高度,行高、外边距以及内边距都可以控制
- 宽度默认是容器的100%
- 可以容纳内联元素和其他块元素
行内元素(inline-level)
行内元素(内联元素)不占有独立的区域,仅仅靠自身的字体大小和图像尺寸来支撑结构,一般不可以设置宽度、高度、对齐等属性,常用于控制页面中文本的样式。
特点:
- 和其他行内元素会在一行
- 高、宽无效,但水平方向的padding和margin可以设置,垂直方向的无效
- 默认宽度就是它本身内容的宽度
- 行内元素只能容纳文本或则其他行内元素。(a特殊)
行内块元素(inline-block)
在行内元素中有几个特殊的标签如<img>
、<input>
、<td>
,可以对它们设置宽高和对齐属性,我们称它们为行内块元素。
特点:
- 和相邻行内元素(行内块)在一行上,但是之间会有空白缝隙
- 默认宽度就是它本身内容的宽度
- 高度,行高、外边距以及内边距都可以控制
标签显示模式转换display
display:inline
:块转行内display:block
:行内转块display: inline-block
:块、行内元素转换为行内块
CSS三大特性
层叠性
这是浏览器处理冲突的一个能力,如果一个属性通过两个选择器设置到同一个元素上,那么这个时候一个属性就会将另一个属性层叠掉。一般情况下,如果出现样式冲突,则会按照CSS书写的顺序,以最后的样式为准。
继承性
所谓继承性是指书写CSS样式表时,子标签会继承父标签的某些样式,如文本颜色和字号。想要设置一个可继承的属性,只需将它应用于父元素即可。
优先性
定义CSS样式时,经常出现两个或更多规则应用在同一元素上,这时就会出现优先级的问题:
继承样式的权重为0。即在嵌套结构中,不管父元素样式的权重多大,被子元素继承时,他的权重都为0,也就是说子元素定义的样式会覆盖继承来的样式。
行内样式优先。应用style属性的元素,其行内样式的权重非常高,可以理解为远大于100。总之,他拥有比上面提高的选择器都大的优先级。
权重相同时,CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级,或者说排在最后的样式优先级最大。
CSS定义了一个!important命令,该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近,!important都具有最大优先级。
特殊性(Specificity)
关于CSS权重,我们需要一套计算公式来去计算,这个就是 CSS Specificity,我们称为CSS 特性或称非凡性,它是一个衡量CSS值优先级的一个标准 具体规范入如下:
specificity用一个四位的数 字串(CSS2是三位)来表示,更像四个级别,值从左到右,左面的最大,一级大于一级,数位之间没有进制,级别之间不可超越。
且数位之间没有进制 比如说: 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0, 所以不会存在10个div能赶上一个类选择器的情况。
继承或者* 的贡献值 | 0,0,0,0 |
---|---|
每个元素(标签)贡献值为 | 0,0,0,1 |
每个类,伪类贡献值为 | 0,0,1,0 |
每个ID贡献值为 | 0,1,0,0 |
每个行内样式贡献值 | 1,0,0,0 |
每个!important贡献值 | ∞ 无穷大 |
优先总结:
- 使用了 !important声明的规则。
- 内嵌在 HTML 元素的 style属性里面的声明。
- 使用了 ID 选择器的规则。
- 使用了类选择器、属性选择器、伪元素和伪类选择器的规则。
- 使用了元素选择器的规则。
- 只包含一个通用选择器的规则
css基本介绍的更多相关文章
- 3、CSS基本介绍
1.1 CSS基本介绍一.web 标准所谓的web标准指的就是一系列规范网页书写的要求,它是由W3C组织制定,在它里面要求网页的结构.样式.行为三者相分离.二.名词解释1.结构:就是通过HTML标签搭 ...
- 常用前端布局,CSS技巧介绍
常用前端布局,CSS技巧介绍 对前端常用布局的整理总结,并对其性能优劣,兼容等情况进行介绍 css常用技巧之可变大小正方形的绘制 1:若通过设置width为百分比的方式,则高度不能通过百分比来控制. ...
- CSS基础介绍
CSS介绍 CSS是指层叠样式表,CSS样式表极大的提高了工作效率 CSS基础语法 1. 首先选择一个属性 2. 选择了属性以后,用大括号括起来 3. 括号里面是对应的属性和属性值,如: select ...
- 二、CSS 基本介绍
[ 显示目录 ] [ 隐藏 ] 目录 基本概念 CSS组成部分 CSS的规则 引入CSS样式的方法 颜色的表示 CSS Reset 选择器分类 浮动 盒子模型 box-sizing属性 实例:实现“田 ...
- CSS入门介绍
一.背景 这里将陆续介绍前端CSS中相关知识,先介绍CSS2.1,后续会介绍CSS3的相关属性,通过该系列的文章,希望能给准备转战前端的人员一些帮助,同时也帮助自己梳理知识,文章中如有错误,欢迎指出. ...
- 前端部分-CSS基础介绍
CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素.也就是定义相应的标签语言来定制显示样式达到一定的显示效果. 每个CSS样式由两个组成部分:选择器和 ...
- CSS 的介绍
第一章 的介绍 1.CSS:“层叠样式表”,它是cascading style sheets的缩写,作用就是给HTML标签加表现形式(样式-显示),如:字体,图片,列表,位置等. 在浏览器中可以看到部 ...
- css样式介绍
1 css之选择器 1.1 基本选择器 1.2 组合选择器 E,F 多元素选择器,同时匹配所有E元素或F元素,E和F之间用逗号分隔:div,p { color:#f00; } E F ...
- 百万年薪python之路 -- 前端CSS基础介绍
一. CSS介绍 CSS定义 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 语法结构 div{ color: green ...
- Html/CSS 初步介绍html和css部分重要标签
&初步介绍html和css部分重要标签& 注:开头书写:<!DOCTYPE html>表明对应标准html代码 先行总结重点 下方给出具体 CSS: 1. position ...
随机推荐
- Java基础重要知识点-反射
反射,如何把.java文件转化为.class文件 JAVA反射机制是在运行状态中,对于任意一个类,都能够知道这个类的所有属性和方法:对于任意一个对象,都能够调用它的任意一个方法和属性:这种动态获取的信 ...
- IIS系统短文件名漏洞猜解过程
今天看教程的时候,老师关于后台管理说到了短文件名漏洞,我就随便找了个网站猜解,可能是运气太好了,有了这次实践的过程,因为这个漏洞是13年的时候比较火,现在差不多都修复了,抓到一条漏网之鱼, 短文件名漏 ...
- Springboot整合Elastic-Job(二)
上文我们讲到Springboot整合Elastic-Job整合的demo,只是简单的实现了主要功能.本文在上文基础上,进行新的调整. 事件追踪 Elastic-Job提供了事件追踪功能,可通过事件订阅 ...
- ByteView和Sink
久违啦米娜桑!!! 最近有点忙,一月有余没有更新了,实在对不起大家!!! 上线后看到不少朋友发的私信,感谢大家的赞许与信任,后面我会尽最大的努力按时更新,不断推出更优质的文章!!! 本来计划最后花1讲 ...
- (四)surging 微服务框架使用系列之网关
一.什么是API网关 API网关是一个服务器,是系统对外的唯一入口.API网关封装了系统内部架构,为每个客户端提供一个定制的API.API网关方式的核心要点是,所有的客户端和消费端都通过统一的网关接入 ...
- 0422作业:基础(if,while)
""" 1.题目:企业发放的奖金根据利润提成.利润(I)低于或等于10万元时,奖金可提10%: 利润高于10万元,低于20万元时,低于10万元的部分按10%提成,高于10 ...
- 数据结构——Java实现链栈
一.分析 栈是限定仅在表的一端进行插入或删除操作的线性表,对于栈来说,操作端称为栈顶,另一端则称为栈底,栈的修改是按照后进先出的原则进行的,因此又称为后进先出的线性表. 链栈是指采用链式存储结构实现的 ...
- hash一致性
参照:https://www.cnblogs.com/moonandstar08/p/5405991.html 参照:http://www.cnblogs.com/haippy/archive/201 ...
- 面试常问的几个排序和查找算法,PHP实现
冒泡,快排,二分查找,都是面试常问的几个算法题目,虽然简单,但是一段时间不用的话就很容易忘记,这里我用PHP实现了一下,温故而知新. 排序 冒泡排序 每一次冒出一个最大的值 function bubb ...
- PhotoshopCS5中将单位修改成百分比
PhotoshopCS5中单位默认是厘米或px,当用同一动作修改两张照片时,会因为片子大小不同,修改收到影响.若将单位修改成百分比,则动作会根据照片大小,自动进行调整. 1)选择菜单栏中的“编辑”选项 ...