css----层叠样式表详细知识点大全
文章目录
- css---层叠样式表
- 一:结构和表现分离
- 二:应用css的方法
- 1:页面嵌入式
- 2:行内嵌入式
- 3: 独立css文件
- 三:css选择器
- 1:标签名选择器
- 2:id选择器
- 3:类选择器
- 四:颜色的表示
- 1:颜色名
- 2:十六进制
- 3:函数方式
- 五、尺寸的表示方式:
- 六、图像的表示方式:
- 七、文本的样式属性
- 八:css继承性和层叠性
- 1:css的继承性
- 2:css的层叠性
- 九:css的优先级
- 十:属性选择器
- 十一:复合选择器
- 十二:关系选择器
- (1)子元素选择器(>):
- (2)兄弟选择器:
- 十三:伪类选择器
- 十四:empty选择器
- 十五:列表的样式规则
- 十六:盒子模型——网页布局的基础
- (1)边界(margin)
- (2)填充(padding)
- (3)边框(border)
- (4)清除默认边距
- (5)背景图像:
css—层叠样式表
一:结构和表现分离
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。网页中所有的样式都由css来进行设置,即结构和样式分离。
二:应用css的方法
1:页面嵌入式
常放在head和body之间。
<style type="text/css">Css的样式规则</style>
2:行内嵌入式
给标签加入style属性,设置样式。
3: 独立css文件
先创建独立的样式文件(.css),然后在页面中导入样式文件。
第一步:创建样式文件(.css)第二步:在页面文件中导入样式文件
<link href="样式文件的地址" type="text/css" rel="stylesheet" />
三:css选择器
css选择器被称为css的核心。
1:标签名选择器
标签名{
样式属性:值;
样式属性:值;
}
2:id选择器
运用id选择器的方法是给标签带上id标签,id标签的属性值不能重复。
#id属性值{
样式属性:值;
样式属性:值;
}
3:类选择器
给标签带上class属性,class属性值可以重复。
.class属性值{
样式属性:值;
样式属性:值;
}
四:颜色的表示
1:颜色名
如red、blue、green
2:十六进制
#rrggbb:r、g、b是三原色,十进制取值在0~F之间。
3:函数方式
rgb(r、g、b),r,g,b是三原色,十进制取值在0~255之间。
rgba(red,green,blue,alpha)alpha表示颜色透明度。
五、尺寸的表示方式:
(1)em:相对的长度单位。1em = 16px
(2)px:像素,相对的长度单位.
(3)in:英寸,绝对长度单位 1in = 2.54cm
(4)cm:厘米,绝对长度单位
(5)mm:毫米,绝对长度单位
六、图像的表示方式:
(1)png:体积小,适合网络传输
(2)jpg(.jpeg):体积大,不适合网络传输
(3)gif:小动画、支持透明。url(‘图像的全名’)
七、文本的样式属性
(1)字型:font-family: ‘宋体’;
(2)字体加粗:font-weight: bold;
(3)字体样式:font-style: italic;
(4)字母间距: letter-spacing: 0px;
(5)单词间距:word-spacing: 10px;
(6)行高:line-height: 50px;
(7)水平对齐方式:text-align
(8)控制英文字符的大小:text-transform
(9)设置文本的下划线、上划线、删除线:text-decoration
(10)首行文本的缩进:text-indent
(11)文本添加阴影效果:text-shadow:水平阴影距离 垂直阴影距离 模糊半径 颜色
八:css继承性和层叠性
1:css的继承性
在书写css样式表时,子标签会继承父标签的某些样式。
p{color:"red";}
<p>
西安邮电大学
<span>西安电子科技大学</span>
</p>
此时,“西安邮电大学”和“西安电子科技大学”都为红色。边框属性、定位属性、内外的间距属性、元素的宽高属性、布局属性、背景属性不具有继承性的。
2:css的层叠性
同一个标签可以应用不同的样式
九:css的优先级
优先级取决于选择器的权重。
选择器 | 权重 |
---|---|
标签名 | 1 |
类 | 10 |
id | 100 |
(1)权重值越大,优先级越高
(2)继承样式的权重值为0
(3)行内样式优先
(4)当权重值相同时,CSS遵循就近原则
(5)CSS定义了一个!important命令,该命令被赋予最大的优先级。
十:属性选择器
“E”代表标签名,“att”表示标签的属性。
1:E[att^=value]——>属性以value开头
2: E[att$=value]——> 属性以value结尾
3:E[att*=value]——> 标签属性包含value
十一:复合选择器
多个选择器混合使用,选择器之间用逗号隔开。
p,.dd,#d1{color: red;}
十二:关系选择器
(1)子元素选择器(>):
h1>strong{ color:blue;}
(2)兄弟选择器:
A、临近兄弟选择器:使用加号“+”来链接前后两个选择器。选择器中的两个元素有同一个父亲, 而且第二个元素必须紧跟第一个元素。
div>p+div{ color: chartreuse;}
B、普通兄弟选择器:使用 “~”来链接前后两个选择器。选择器中的两个元素有同一个父亲, 但第二个元素不必紧跟第一个元素。
div>#p2~div{color: chartreuse;}
十三:伪类选择器
1:E:first-child{ 样式规则 }
匹配父元素的第一个子元素E。要使该属性生效,E对象必须是某个对象的子元素。
2:E:last-child{ 样式规则 }
匹配父元素的最后一个子元素E。要使该属性生效,E对象必须是某个对象的子元素。
3:E:nth-child(n){ 样式规则 }
匹配父元素的第n个子元素E。要使该属性生效,E对象必须是某个对象的子元素。
4:E:nth-last-child(n){ 样式规则 }
匹配父元素的倒数第n个子元素E。要使该属性生效,E对象必须是某个对象的子元素。
十四:empty选择器
1:E:empty{ 样式规则 }
匹配没有任何子元素(包括text节点)的元素E。
2:E:link{ 样式规则 }
设置超链接a在未被访问前的样式。
3:E:visited{ 样式规则 }
设置超链接a在其链接地址已被访问过时的样式。
4:E:hover{ 样式规则 }
设置元素在其鼠标悬停时的样式。
5:E:active{ 样式规则 }
设置元素在被用户激活(在鼠标点击与释放之间发生的事件)时的样式。
link—hover—visited—active(应按顺序设置)
十五:列表的样式规则
(1)list-style-image:用来设置列表项的标记(项目符号)图像。
(2)list-style-style:用来设置列表项的项目符号样式。若值为none则没有项目符号
(3)list-style-position:设置项目符号和文本的位置关系。
A: outside: 列表项目标记放置在文本以外,且环绕文本不根据标记对齐
B:inside: 列表项目标记放置在文本以内,且环绕文本根据标记对齐 。
十六:盒子模型——网页布局的基础
(1)边界(margin)
盒子的边框与包含该盒子的容器的之间的距离。
A、margin-top:上边界
B、margin-right:右边界
C、margin-bottom:下边界
D、margin-left: 左边界
(2)填充(padding)
内补白(内边距),盒子中的内容与盒子边框之间的距离,一般不要对边设置。
A、padding: 上 右 下 左
B、padding-top:上边距
C、padding-right:右边距
D、padding-bottom:下边距
E、padding-left:左边距
(3)边框(border)
盒子的边框线
A、border-style:边框的样式【上、右、下、左】
B、border-width:边框的宽度【上、右、下、左】
C、border-color:边框的颜色【上、右、下、左】
D、border(综合设置边框): 边框的宽度 边框的样式 边框的颜色
E、border-radius(圆角边框):水平半径参数/垂直半径参数
(4)清除默认边距
*{padding: 0px;margin: 0px;}
‘*’:通配符,代表所有元素。
(5)背景图像:
background-image:url(图片路径)
background-repeat:
repeat 默认值,图像在水平和垂直方向上都平铺
no-repeat:不平铺
repeat-x:水平平铺
repeat-y:垂直平铺
css----层叠样式表详细知识点大全相关推荐
- css动画详细知识点梳理
css动画深入剖析整理-前端 一 前言 css动画是个很神奇的玩意儿,但是属性又很容易混淆,傻傻分不清楚.前端开发已经习惯用Javascript来写动画,但是作为一个想走前端方向的学生,我觉得还是有必 ...
- HTML学习知识点大全-----超详细(各种标签使用讲解及案例)
HTML学习知识点大全-----超详细(各种标签使用讲解及案例) 1:概念 **最基础的网页开发语言 *Hyper Text Markup language:超文本标记语言超文本:运用了超链接的方法, ...
- CSS基础必备知识点01
CSS基础必备知识点 CSS(Cascading Style Sheme), 层叠样式表或级联样式表,简称样式表.它的作用是给HTML网页设置外观或者样式.其中外观或者样式指的是:HTML网页中的文字 ...
- 前端面试知识点大全——浏览器篇
总纲:前端面试知识点大全 目录 1.浏览器工作原理 2.浏览器如何解析css,如何渲染css的 2.1 构建DOM树 2.2 构建CSSOM规则树(就是css规则树) 2.3 渲染阻塞 2.4 构建渲 ...
- css层叠样式表——css基础介绍
css层叠样式表第一天 css层叠样式表01 css层叠样式表第一天 css介绍 css语法 html标签全局属性 引入css样式的方式 知识点应用 css介绍 css是Cascading Style ...
- 计算机三级网络技术知识点大全(二)
1.基于网络的信息系统主要包括以下几个部分:网络运行环境.网络系统.网络操作系统.网络应用软件开发与运行环境.网络应用系统.网络安全系统和网络管理系统. 2.网络运行环境包括机房和电源两部分. 3.网 ...
- 学无止境的CSS(xHTML+CSS技巧教程资源大全)
本文里面收集一些有关CSS的技巧.教程.工具和观点等,其中一些你也许早就运用的炉火纯青,也可能有的你听都没听说过.不管是新手还是高手,大家都继续学习吧. 一,Web 标准 要玩游戏,就得先了解规则.要 ...
- python基础知识点大全
python基础知识点大全 Excerpt 什么是CPython?编译型与解释型编程语言一般认为,Python与Java都是解释型语言,只是不那么纯粹.也可以认为它们是先编译再解释的编程语言.并非所有 ...
- 60+CSS技巧教程资源大全
一,Web 标准 要玩游戏,就得先了解规则.要学CSS,就应该先了解一下Web标准.尽管看上去不是必须的(我在学CSS之前,根本不知道也不想知道Web标准是个啥玩意儿).应该说,你是否学Web标准,跟 ...
最新文章
- C#中接口和方法的运用(Fourteenth Day)
- python如何对两个矩阵进行拼接_Python合并两个numpy矩阵
- Nginx优化、服务器状态模块(--with-http_stub_status_module 的安装使用)
- Hash MD5 CRC 知识
- mysql目录树_无限级目录树+记忆节点状态(PHP+mysql)
- Linux串口阻塞与非阻塞
- 在Saas发展的黄金时代里带你理解SaaS设计
- 【Python3爬虫】用Python中的队列来写爬虫
- 知乎万赞回答:什么工具能做可视化大屏,还能做数据地图?
- React:Redux简介
- 抓包工具Charles —— 绿化、抓包入门
- 服务器两个内存为何只显示4g_win10系统插入2个4G内存条却只显示4G的解决方法
- PyQt5自定义图片组件:同时显示多张图片
- 【技术晨读】EAV or JSON
- Mybatis-主键回填
- 俺同学的QQ签名,我晕~
- C语言程序设计教程(第三版)课后习题6.11
- python计算圆周率的方法_用python计算圆周率PI
- 花生wifi后台管理系统项目日记
- 微信朋友圈数据库模式如何设计的?
热门文章
- nt6 硬盘安装系统
- 蓝桥杯JAVA-7.集合(容器)在竞赛中的使用
- Stata:空间双重差分模型(SpatialDID)-xsmle
- 哈佛大学凌晨四点半的景象
- 用KEIL5打开KEIL4的文件
- 为什么pytorch要用mean=[0.485, 0.456, 0.406] 、std=[0.229, 0.224, 0.225]
- 备战数学建模1-MATLAB矩阵相关
- python 字符串转图片_python用base64库进行图片与字符串的转换
- python中全组合函数(combinations)与全排列函数(permutations)
- KUKA机器人示教器讲解