css学习记录一
写在前面
CSS（cascading style sheets）层叠样式表 可以为网页创造样式表，通过样式表可以对网页进行装饰。（推荐开发工具 vscode（首推） qq电脑管家下载 其余还有sublime webstrom hbuilder（国人开发））本篇文章主要内容为css样式入门，以及块元素和内联元素，以及常见的选择器以及他们的优先级及应用
内联样式
可以将css样式直接编写到元素的style属性中，将样式直接编写到style属性中，被称为内联样式，只对当前元素起作用(注意每个样式之间分号间隔；)
<p style="color:red;font-size:40px;"></p>
内联元素属于结构与表现耦合，不方便后期维护，不推荐使用，存在意义即平时开发时做实验代码用。
可以将css样式卸载head中的style标签里，将上面的代码转化为下面代码
<head>
<style tyle ="text/css">//p为css选择器 为选中所有的p标签元素 {}为声明块
p{
color:red;
font-size:40px;
}
<style>
</head>
<body>
<p>这是个p元素</p>
</body>
公用css样式
可以在html外部创建一个css文件，将style中的代码编写在外部的css为文件中可以在html中通过link标签来将外部的css样式表应用到当前页面中
<link rel="stylesheet" type="text/csss" href ="xx.css"/>
这样可以完全使结构和表现分离，最大限度的使样式可以复用，将样式统一写在样式表中，可以利用浏览器的缓存，增加用户的用户体验，推荐使用。
css中的注释与css的语法
在html中的注释为<-- --> 但css中的注释为/* */且只能在style标签中使用
语法：选择器，声明块 以上代码片里已有解释
块元素和内联元素
块元素：所谓块元素即为独占一行的元素，无论如何 例如p（语义段落）div（没有语义，没有默认样式，主要用来页面布局） h1（标题），h2…
内联元素：<span 没有语义 用来选中文字，为文字设置样式>不独占一行，行内元素，只占自身大小的空间常见内联元素 a img iframe
块元素主要做页面的布局，内联元素设置文字样式，一般用块元素包含内联元素，但轻易不会用内联元素包含块元素，因为块元素主要用来布局，a可以包含所有元素，除了本身。
p元素为块元素，但不能包含其他块元素
元素之间的关系 父元素：直接包含子元素的元素
子元素：直接被父元素包含的元素
祖先元素：直接或间接包含后代元素的元素
后代元素：直接或间接被祖先元素包含的元素
兄弟元素：同一个父元素的元素为兄弟元素
选择器
常用选择器
/*元素选择器：标签名{}*/
p{
color:red;
}
/*id选择器：通过元素的id属性值选中唯一的一个元素 #id属性值{}*/
#p1{
font-size:20px;
}
/*class选择器 和id属性相似，用的较多可以重复 .class属性值{}*/
.p2{
color：blue;
}
<p class="p2 hello" id="p1"></p>
/*为id为p1 class为p2的元素还有h1设置同一个样式*/
/*选择器分组 并集选择器 写法：选择器1， 选择器2， 选择器n{}*/
#p1， .p2， h1{
background-color：yellow；
}
/*通配选择器 选中页面所有选择器 写法*{}*/
*{
color：red；
}
/*为class为p3的span元素设置样式 交集（复合）选择器 写法：选择器1选择器2选择器n{}*/
span.p3{
color：blue；
}
/*为div中的span元素设置为绿色 后代元素选择器 选中指定元素的指定后代元素 祖先元素 后代元素{}*/
div span{
color：red;
}
/*选中id为d1的div中的p元素中的span*/
#d1 p span{
font-size：50px；
}
/*为div的子元素span设置一个背景颜色为黄色，但不要影响后代元素（除子元素的）*/
/*语法 父元素 > 子元素{} (ie6 不支持)*/
div > span{
background-color:yellow;
}
伪类选择器
伪类专门用来表示元素的一种状态 比如：访问过的链接，获取焦点的文本框，当我们给这些特殊需要的创造样式可以用伪类选择器
没访问的链接a:link{} （浏览器通过历史记录来判定是否访问过）
访问过的链接a:visited{}（由于涉及到用户的隐私问题，所以使用这个伪类只能设置字体颜色）
鼠标移入a:hover{}
超链接被点击状态a:active{}（可以给a标签以外的元素使用 ie6不支持）
获取焦点比如文本框input:focus
选中的元素::selection{} 比如为p元素中的元素选中样式p::selection{background-color:red}在火狐中需要这样写p::-moz-selection{} -moz为火狐专用，为兼容多个浏览器 同一样式可以写两遍。
伪元素选择器
使用伪元素来表示元素中的一些特殊的位置
p中的第一个字符设置样式p:first-letter{}
首行 p:first-line{}
之前的元素p:before{
content：我出现在p前面；
color：red；
} 通过content可以在前面添加文字和颜色，content中的内容不能选中，同理after和before一样功能。
属性选择器
属性选择器，可以根据元素中的属性和属性值来添加样式
title属性，这个属性可以给任何标签指定，当鼠标移入元素的时候会显示title中的值
<p title="hello">实验</p>
/*属性选择器写法*/
p[title]{
bcackground-color:yellow;
}
/*指定属性值的属性选择器*/
p[title="hello"]{
bcackground-color:yellow;
}
/*指定属性值以he开头的属性值样式 ^指以什么开头 $指以什么结尾 *指包含*/
p[title^="he"]{
bcackground-color:yellow;
}
/**/
其他子元素选择器
p:first-child{}指的是为所有的元素子元素的第一个p标签设置背景颜色
为专门div父元素的子元素需要div > p:first-child{}
p:nth-child（参数）可以找到指定位置的子元素
p:first-of-type 指的是当前类型的子元素第一个且是紧挨着的第一个。
为span后的p元素设置样式 以下即可实现
span + p{
xxx；
}
span~p{
//选中span后的所有兄弟元素
}
否定伪类选择器
从已选中的元素剔除某些元素 p标签中全部实现样式除了类为hello的元素
p:not(.hellow){
}
样式的继承 后代元素的样式可以被后代元素继承，利用继承 可以将样式设置给祖先元素，背景相关样式不能被继承
选择器的优先级
当用不同的选择器 选择同一元素，设置不同样式的时候，最终采用哪个选择器的样式 根据选择器的优先级来显示，
优先级的规则
！import 最高
内联样式，优先级1000
id选择器，优先级100
类和伪类，优先级10
元素选择器，优先级1
通配选择器* ，优先级0
继承的样式，没有优先级
优先级的计算
p#p2{
当选择器中包含多种选择器时，需要将选择器的优先级相加，得100+1=101
}
注意，选择器的优先级计算不会超过他的上一级的优先级
同样优先级的，使用靠后的样式。
并集选择器是单独计算的
特殊情况 样式中添加！import 则此时该样式获得最大的优先级甚至超过内联样式，但在开发中尽量避免使用。
伪类的顺序
涉及到超链接a的伪类有：link ：visited ：hover ：active（平时写伪类可以按照这个顺序写，好记采用 love hate） 这四个选择器的优先级是一样的，一样的用写在下面的代码
更多前端资料可以关注公众号：前端从入门到SP
请扫描二维码获取更多前端资料
849
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
