分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 软件开发

前端基础CSS规则

发布时间:2023-09-06 01:17责任编辑:白小东关键词:CSS前端

CSS 语法

CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。

 selector {                  property: value;                  property: value;             ...  property: value                   }

      css的四种引入方式

1.行内式

行内式是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势,不推荐使用

2.嵌入式

嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中

3 链接式

将一个.css文件引入到HTML文件中

4.导入式

将一个独立的.css文件引入HTML文件中,导入式使用CSS规则引入外部CSS文件,<style>标记也是写在<head>标记中

                    css选择器

基本选择器

组合选择器

E,F   多元素选择器,同时匹配所有E元素或F元素,E和F之间用逗号分隔      :div,p { color:#f00; } E F   后代元素选择器,匹配所有属于E元素后代的F元素,E和F之间用空格分隔 :li a { font-weight:bold;} E > F   子元素选择器,匹配所有E元素的子元素F            :div > p { color:#f00; }  E + F   毗邻元素选择器,匹配所有紧随E元素之后的同级元素F  :div + p { color:#f00; }   E ~ F   普通兄弟选择器(以破折号分隔)                 :.div1 ~ p{font-size: 30px; }

注意,关于标签嵌套:

一般,块级元素可以包含内联元素或某些块级元素,但内联元素不能包含块级元素,它只能包含其它内联元素。需要注意的是,p标签不能包含块级标签。

伪类

anchor伪类:专用于控制链接的显示效果

‘‘‘ ???????a:link(没有接触过的链接),用于定义了链接的常规状态。 ???????a:hover(鼠标放在链接上的状态),用于产生视觉效果。 ???????????????a:visited(访问过的链接),用于阅读文章,能清楚的判断已经访问过的链接。 ???????????????a:active(在链接上按下鼠标时的状态),用于表现鼠标按下时的链接状态。 ???????????????伪类选择器 : 伪类指的是标签的不同状态: ??????????????????????????a ==> 点过状态 没有点过的状态 鼠标悬浮状态 激活状态 ???????????????a:link {color: #FF0000} /* 未访问的链接 */ ???????????????a:visited {color: #00FF00} /* 已访问的链接 */ ???????????????a:hover {color: #FF00FF} /* 鼠标移动到链接上 */ ???????????????a:active {color: #0000FF} /* 选定的链接 */ 格式: 标签:伪类名称{ css代码; }‘‘‘

选择器的优先级

css的继承

继承是CSS的一个主要特征,它是依赖于祖先-后代的关系的。继承是一种机制,它允许样式不仅可以应用于某个特定的元素,还可以应用于它的后代。例如一个BODY定义了的颜色值也会应用到段落的文本中。

  

css的优先级

所谓CSS优先级,即是指CSS样式在浏览器中被解析的先后顺序。

样式表中的特殊性描述了不同规则的相对权重,它的基本规则是:


1 内联样式表的权值最高               style=""------------1000;

2 统计选择符中的ID属性个数。       #id ???--------------100

3 统计选择符中的CLASS属性个数。 ?.class ?-------------10

4 统计选择符中的HTML标签名个数。 ?p ????---------------1

按这些规则将数字符串逐位相加,就得到最终的权重,然后在比较取舍时按照从左到右的顺序逐位比较。

前端基础CSS规则

原文地址:http://www.cnblogs.com/hanxiaofeicf/p/7656477.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved