转载:https://www.cnblogs.com/programerHuan/p/4772575.html
作者:昵称：程序猿欢
一.概述
所有的样式格式如下:
样式名称:属性值
属性摘要:
background-color 元素的背景颜色
border 设定元素的边框
color 设定元素的前景色
font-size 设定字体的字号
height 设定元素的高度
padding 设定元素到边框的间距
text-decoration设定文字的装饰效果
width 设置元素宽度
二.样式的分类
样式分为以下几种:
1.元素内嵌样式
2.文档内嵌样式
3.外部样式表
4.用户样式
5.浏览器样式
当有多个样式来源时,按照上述顺序决定CSS的属性值(第一个最高)
1.<a href=“http://www.baidu.com” style=“ color:white”>元素内嵌样式
a类
2.<style type=“text/css”>
a{
background-color:grey;
color:white;
}
</style>
<a href=“http://www.baidu.com”>Visit the Apress website</a>
文档内嵌样式,装饰所有a标签的元素
3.文件styles.css存放在当前的html文件的根目录的下一个目录CSS文件夹内
<!doctype html>
<html>
<head>
<title>example</title>
<!-- <link rel="stylesheet" type="text/css" href="./css/combined.css"></style><!-- 一个./表示上一个目录 --> 导入CSS文件-->
</head>
外部样式表
注意:
当想要将样式从一个样式表导入另一个样式表,需要在被导入样式表的表头写上@import ”导入的CSS.css”能写在@import前面,只有@charset “编码代号”
4.每个浏览器都有自己管理用户样式的方式,这些样式表我们称为用户样式.如果在Chrome浏览器下,则存放在DefaultUser StyleSheetsCustom.css的Custom.css就是用户样式.我们只要找到这个样式,就可以自己对这个样式进行修改.
5.浏览器样式指浏览器默认的样式.
三.样式的层叠与继承
1.如果对于同一个标签元素,存在多个样式,比如元素内嵌样式,文档内嵌样式,可在其后面添加”!important”来调整其次序,加了这个之后,浏览器会优先使用.
2.继承:<p>I like <span>apples</span> and oranges.<code>这里使用的span行内元素继承了父元素p的内容(继承元素外观,布局不会)</code></p>;但如果想要强行把父元素的布局赋给子元素,如下:
span{
border: inherit;/*强行将其布局相关元素赋给span*/
}
四.当存在多个选择器混用时的优先级
a为标签内直接定义(style=“ ") b为ID选择器的定义(#)
c为class类选择器的定义 d为类选择器的定义