首页 / 知识
CSS从入门到精通基础篇分享
2023-04-11 13:46:00

HTML是网页内容的载体CSS样式是表现(外观控制)JavaScript是行为,用来实现网页特效效果
CSS 层叠样式表 (Cascading Style Sheets)用于定义HTML内容在浏览器内的显示样式
CSS简化HTML相关标签,网页体积小,下载快解决内容与表现分离的问题更好的维护网页,提高工作效率
CSS规则由两部分构成:选择器,声明
写在标签内:
html注释:CSS注释:/注释语句/
行内样式(内联样式)内部样式表(嵌入样式)外部样式表(Link链入)导入式
在开始标签内添加style样式属性
内部样式(嵌入样式),把css样式代码写在:
说明: style要放在head标签之间
外部样式表,把CSS样式代码写在独立的一个文件中扩展名: CSS文件名。CSS引入外部文件:
说明: link要放在head标签之间
@import “外部CSS样式”说明:@import写在style标签内最开始
类别引入方法位置加载行内样式开始标签内stylehtml文件内同时内部样式head中style内html文件内同时外部样式head中link引用css样式文件与html文件分离页面加载时,同时加 载CSS样式导入式 @import在样式代码最开始处css样式文件与html文件分离在读取完html文件之 后加载
标签选择器类选择器ID选择器全局选择器群组选择器后代选择器
为HTML标签添加class属性:
通过类选择器来为具有此class属性的元素设置CSS样式:
可对不同类型元素的同一个名称的类选择器设置不同的样式规则:
同一个元素可以设置多个类,之间有空格隔开
以HTML标签作为选择器:
为HTML标签添加ID属性:
通过ID选择器来为具有此ID的元素设置CSS规则:
所有标签设置样式:
集体统一设置样式:
使用后代选择器设置,之间用空格隔开:
后代选择器可以多层
链接的4中状态:激活状态,已访问状态,未访问状态, 和鼠标悬停状态。
伪类说明link未访问的链接visited已访问的链接hover鼠标悬停状态active激活的链接
:hover用于访问的鼠标经过某个元素时:active用于一个元素被激活时(即按下鼠标之后放开 鼠标之前的时间)
:Link > :Visited > :Hover > :Active
** 说明: **
a:hover 必须置于 a:link 和 a:visited 之后,才有效a:active 必须置于 a:hover 之后,才有效伪类名称对大小写不敏感。
从父元素那继承部分CSS属性
可以定义多个样式不冲突时,多个样式可层叠为一个冲突时,按不同样式规则优先级啦应用样式
行内样式>内部样式>外部样式
说明:
链入外部样式表与内部样式表之间的优先级取决于所处位置的先后最后定义的优先级最高(就近原则)
同一样式表中:
权值相同
就近原则(离被设置元素越近优先级越高)权值不同
根据权值来判断CSS样式,哪种CSS样式权值高,就使用哪种样式
标签选择器:权值为1类选择器和伪类:权值为10ID选择器:权值为100通配符选择器:权值为0行内样式:权值为1000
统计不同选择器的个数每类选择器的个数乘以相应权值把所有的值相加得出选择器的权值
可调整样式规则的优先级添加在样式规则之后,中间用空格隔开
!important声明高CSS使用方法的优先级
行内样式>内部样式>外部样式link链入外部样式和style内部样式优先级,取决于先后顺序。样式表中优先级
Id选择器>class选择器>标签选择器>通配符
权值相同权值不同就近原则使用权重高的
采用英文字母、数字以及“-”和“_”命名以小写字母开头,不能以数字和“-”、“_”开头命名形式:单字,连字符,下划线和驼峰使用有意义的命名
id不要滥用, 谨慎使用适当使用class
|
最新内容
相关内容
python如何判断一个数是素数
python如何判断一个数是素数,数字,代码,培训,质数,素数,方法,个数,自然数,不是,思路,python如何判断一个数是素数的方法:一个大于1的自然数,除python如何比较两个字符串是否相等
python如何比较两个字符串是否相等,培训,工作,字符串,两个,下面,以上,方法,更多,内容,python在实际的开发工作中,经常会遇到要判定两个字符串python如何确定是否为可迭代对象
python如何确定是否为可迭代对象,培训,元素,索引,对象,整数,字典,函数,类型,下标,模块,迭代可以理解为,任意的集合使用for循环遍历python中,迭python判断一个数是否为int
python判断一个数是否为int,培训,基础,变量,类型,函数,个数,整数,以上,不是,方法,在python中如何判断一个数是不是整数?其实python有两种查看pythonnan是什么
pythonnan是什么,培训,系统,电脑,无穷大,个数,类型,定义,操作系统,以上,表示,NaN是浮点数的一个值,代表“不是数”,通常是除0错误python中可以python判断dict中key是否存在
python判断dict中key是否存在,培训,通用,第一,字典,方法,结果,函数,属性,做法,上面,今天来说一下如何判断字典中是否存在某个key,一般有两种通pythonelif语句报错是什么原因
pythonelif语句报错是什么原因,培训,语句,数据,条件,程序,结果,内容,变量,使用方法,更多,python的else和elif语句也可以叫做子句,因为它们不能pythonpython是前端语言吗?
pythonpython是前端语言吗?,代码,互动,培训,平台,标准,设计,语言,前端,语法,解释性,python语言属于后端开发语言。Python是一个高层次的结合python判断元素是否是字符串类型
python判断元素是否是字符串类型,培训,异常,类型,实例,字符串,数据类型,对象,元素,参数,序列,isinstance()是Python中的一个内建函数语法:isinpython判断字符串是否包含中文
python判断字符串是否包含中文,培训,检测,代码,字符串,中文,字符,范围,空格,原理,以上,原理:中文字符的编码范围是:\u4e00-\u9fff只要编码在python如何判断一个数是否是素数
python如何判断一个数是否是素数,代码,数字,培训,情况,质数,素数,自然数,不是,循环体,个数,先来看下什么是python质数:质数(Primenumber),又称pythonpython是什么类型的语言
pythonpython是什么类型的语言,培训,系统,教育,软件,电脑,代码,简介,人工智能,类型,语言,python是一种面向对象、解释型、动态类型计算机程序