css布局级层级关系--2017.11.13

一。页面引用css的方式
1.内联样式
<h1 style="color:red;font-size:20px;"></h1>
2.内部样式
<style type="text/css">
hi{
color:red;
font-size:20px;
}
</style>
3.外部样式
一种:<head>
<link rel="stylesheet" type="text/css" herf="index.css">
</head>
二种:
<style>
@import url("index.css");
@import "index.css";

</style>
二。文件路径
“./”代表当前所在文件夹下的
“../”代表上一级目录
“/”一般放到服务下 代表域名下的某路径 所以一般使用相对路径


css: 页面
文字相关
背景相关
布局相关
响应相关
动画相关
变形相关
css:选择器
1.基础选择器:“*”通用选择器:匹配页面所有元素
“ID”id选择器 匹配页面对应的ID元素
“class”类选择器匹配页面对应的class类下的元素
“element”标签选择器
2.组合选择器:‘E,F’并列选择器
‘E F’后代选择器 E下的所有F后代(子孙)
‘E>F’子元素选择器 E下的直接后代(直限儿子)
#b+#c 是 #b 元素之后紧挨着#b的 #c
#b~#c 是 #b 元素之后同级的 #c
‘ef’e和f之间没有空格,没有任何符合 代表既有e又有f 例如"class='a active'" 一般用.a.active 中间无空格
3.属性选择器


伪类选择器:用于向某些选择器添加特殊的效果。
.child:first-child 匹配.child所对应的父元素下第一个子元素
.child:first-of-type 匹配.child所对应的父元素下同种类型的第一个子元素
.child:nfn-of-type(2) 同种类型下的第二个选择器 一般2n代表偶数,2n+1代表奇数
伪元素选择器:用于创建一些不在文档树的元素,并为其添加样式


选择器的优先级:
1.样式后面加!important的 权重最高
2.style属性也在标签里的内联样式
3.id选择器
4.类选择器
5.伪类选择器
5.属性选择器
7.标签选择器
8.通配符选择器
9.浏览器自定义


合理的抽出一些通用样式 ,但具体的某个区域加样式要去针对某个选择器去写
在CSS中,如果对于相同元素有针对不同条件的定义,宜将最一般的条件放在最上面,
并依次向下,保证最下面的是最特殊的条件。这样,浏览器在显示元素时,
才会从特殊到一般、逐级向上验证条件,才会使你的每一个CSS语句都起到效果。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,790评论 1 92
  • 一、CSS选择器 关于CSS选择器,首先请看这里:CSS 选择器参考手册 通过以上,我们可以将CSS选择器分为以下...
    fehysunny阅读 2,273评论 0 2
  • 一、CSS选择器常见的有几种? 基本选择器 通配选择器~选择文档中所有的html元素,用一个*表示 元素选择器~选...
    dengpan阅读 977评论 0 3
  • 1.class 和 id 的使用场景? 类选择器允许以一种独立于文档元素的方式来指定样式。该选择器可以单独使用,也...
    草鞋弟阅读 2,453评论 0 1
  • 她迷路了,给三个男人发了短信, 第一位说注意安全, 第二位说需要我来接你回去吗? 她顿时感觉温暖多了, 可迟迟不见...
    Angelxie阅读 476评论 0 0