CSS层叠样式表

最新推荐文章于 2024-09-21 23:59:03 发布

wodet_t

最新推荐文章于 2024-09-21 23:59:03 发布

阅读量457

点赞数

分类专栏：前端文章标签： css

本文链接：https://blog.csdn.net/wodet_t/article/details/49336405

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

所有样式有下面的规则
Browser default
浏览器默认
外部样式表
内嵌样式表
行内样式

CSS语法
选择器
属性
值
selector {property : value}

body{color : black}

如果值为多个单词，则用双引号“”括起来
p{font-family:”sans serif”}

多个属性的话，则用分号；隔开
对段落进行修饰
p{text-align:center;color:red;font-family:arial}

<link rel="stylesheet" type="text/css" href="css.css">

类选择器
可以将同一类型的html元素定义出不同的样式。
要在html使用类属性。

每个html元素属性只能有一个类属性！！！
并不是说从左到右执行，只要看浏览器怎么渲染显示。

<p class=left class=right>不符合规范！！！</p>

可以省略标签名称直接去定义，
例如：

.center{text-align:center}

最好不要用数字开头作为类的名称，在Mozilla/Firefox中不能正常运行！

id选择器
可以为不同的HTML元素定义相同的样式。
#green{color :green}
可以为不同的html元素定义相同的样式，在页面中id不要重复。

浏览器阅读样式表会根据（样式表来格式化文档）
有三种方法来插入样式表
1、外部样式表
推荐使用，只需改变一个css文件，就可以改变整个网站的外观！
在head区域中使用。
浏览器在mystyle.css文件中读取样式定义信息，来格式化文档。
可以用任何一个文字编辑器来书写，文件不应该包含任何的html标签。
并保存为一个后最为css的文件。

2、内嵌样式表
    直接写在html页面中。
    <head>
    内嵌的样式会覆盖外部相同的样式！

3、行内样式表
    使用行内样式会失去样式表的优势而将内容相混淆。
    一般在修稿个别样式的时候使用！

优先级比较
    样式表优先级顺序为：行内样式>内嵌样式>引入样式>导入样式；

多重样式表
一些属性被相同的选择器设置成不同的样式，值就会向着更加具体的样式所继承！