掌握CSS3 核心

最新推荐文章于 2022-04-29 22:45:50 发布

VIP文章为难我胖虎c

最新推荐文章于 2022-04-29 22:45:50 发布

阅读量257

点赞数 3

分类专栏： css 文章标签： css3 css html

本文链接：https://blog.csdn.net/m0_59708977/article/details/123446078

版权

学习目标

掌握CSS的基本概念和应用
精通CSS选择符-众多高级选择器技术的核心
选择器的权重和优先级
选择器的命名
定位和层叠上下文
CSS绘制高级技巧
CSS机制At-rule
CSS工作原理和性能优化

CSS 的基本概念

CSS 是一种描述 HTML 文档样式的语言。
CSS 描述应该如何显示 HTML 元素。
css 实例

body {
   
  background-color: lightblue;
}
h1 {
   
  color: white;
  text-align: center;
}
p {
   
  font-family: verdana;
  font-size: 20px;
}

CSS 选择器

基本选择器

选择器	例子	例子描述
.class	.intro	选择 class=“intro” 的所有元素。
.class1.class2	.name1.name2	选择 class 属性中同时有 name1 和 name2 的所有元素。
.class1 .class2	.name1 .name2	选择作为类名 name1 元素后代的所有类名 name2 元素。
#id	#firstname	选择 id=“firstname” 的元素。
*	*	选择所有元素。
element	p	选择所有元素。
element.class	p.intro	选择 class=“intro” 的所有元素。

属性选择器

选择器	例子	例子描述
[attr]		用于选取带有指定属性的元素。
[attribute=value]		用于选取带有指定属性和值的元素。

层次选择器

选择器	例子	例子描述
element element	div p	选择元素内的所有元素。
element>element	div > p	选择父元素是的所有元素。
element+element	div + p	选择紧跟元素的首个元素。
element1~element2	p ~ ul	选择前面有元素的每个元素。

伪类选择器

选择器	例子	例子秒速
:link	a:link	选择所有未访问过的链接。
:visited	a:visited	选择所有已访问的链接。
:active	a:active	选择活动链接。
:hover	a:hover	悬浮
:focus	input:focus	选择匹配的E元素，而且匹配元素获取焦点

伪元素选择器

选择器	例子	例子描述
::after	p::after	在每个的内容之后插入内容。
::before	p::before	在每个的内容之前插入内容。

<!DOCTYPE html>
<html>
<head>
<style>
p::after
{
    
content:"- 结束 ";
}
p::before
{
    
content:"- 开始 ";
}
</style>
</head>
<body>
<p>我是唐老鸭。</p>
</body>
</html>

选择器的权重和优先级

CSS三大特性: 继承性、优先级和层叠性;
优先级的等级：

0级(0)：通配选择器（*）、选择符（+、>、~、空格、||）
1级(1)：元素、关系、伪元素
2级(10)：类选择器、属性选择器、伪类
3级(100)：ID选择器
4级(1000)：style内联选择器
5级(10000)：!important
优先级的计算规则：
权重顺序 !important>行内样式>id选择器>类选择器>标签选择器>通配符>继承>浏览器默认
选择器权重：
!important 优先级最高
元素属性优先级高
相同权重后写的生效
当几个类型写在一起时，只需要将它们相加，如下面两个例子，相加之后权重分别未101和110

选择器的命名

骆驼命名法

第一个字母要小写，后面的词的第一个字母就要用大写，例如: studentInfo、navMenuRedButton

帕斯卡命名法

这种命名法同样也是大小写字母混编而成，和骆驼命名法很像，但和骆驼命名法有一点区别，就是所有单词的首字母都要大写，当然也包括第一个单词；例如: StudentInfo、NavMenuRedButton

匈牙利命名法

在名称前面加上一个或多个小写字母作为前缀，来让名称更加好认，更容易理解，例如: head_navigation、
red_navMenuButton；
页面模块的常用命名:

头：header	导航：nav	菜单：menu	友情链接：friendlink
页面外围包裹：wrapper	子导航：subnav	子菜单：submenu	下载：download
页面主体：main	广告：banner	侧栏：sidebar	小技巧：tips
内容：content	标志：logo	栏目：column	滚动：scroll
页脚：footer	搜索：search	热点：hot	上一个：prev
版权&#x

最低0.47元/天解锁文章

为难我胖虎c

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
掌握CSS3 核心

学习目标掌握CSS的基本概念和应用精通CSS选择符-众多高级选择器技术的核心选择器的权重和优先级选择器的命名定位和层叠上下文CSS绘制高级技巧CSS机制At-ruleCSS工作原理和性能优化CSS 的基本概念CSS 是一种描述 HTML 文档样式的语言。CSS 描述应该如何显示 HTML 元素。css 实例body { background-color: lightblue;}h1 { color: white; text-align: center;}p
复制链接

扫一扫