css那些事儿1 css选择符与管理

结合当下作为一名net程序员，难以找到工作情况下，先学习前端知识，前端现在已成为web和app的一个交叉点，web前端化，app使用h5技术前端化，至于什么后台数据库 缓存 消息队列的路线如果没有大型项目平台的建设机会是很难能够大纵深的切入，恰恰前端通过编写微信公众号作为一个切入点，希望不会再也找不到工作，再也无法跳巢的尴尬境地。

1 css语法

选择符{属性：value}css的语法非常简单。

2 css常见简写

color：#ffffff ;color:rgb(255,255,255);rgba(233,233,233,90);或者rgb(20%,30%,40%),又如直接使用枚举的值 color:red，white

border:宽度，样式，颜色  border:1px solid red;我经常用来查看div元素的占用范围

background: 在默认情况下按照下面列举的属性进行

background-color;

background-image:url(http:///dsadsa);

background-repeat:背景平铺设置

background-attachment:fixed ；是否固定还是随着滚动条一起滚动

background-position:x,y;可以使用百分比，凡是使用数字的地方均可使用百分比，如果百分比不起作用的情况下，则查看上级元素是否均不存在百分比的设置

font:

fony-style:字体样式，如 倾斜

font-variant:small-caps 针对英文字母

font-weight:是否加粗

font-size:大小

font-height:文本行高

font-family:字体   如 ”宋体“

列表项li

list-style-type:square  （正方形）列表项目符号类型

list-style-position:inside  项目符号位置

list-style-image:列表项项目符号使用的图片

2 重要而又多变的选择符

选择符主要用来匹配文档元素对象，即选中某个文档元素对象，对其进行css属性设置

2.1 通配符

* 对页面所有元素属性进行设置，也是最简单

2.2 类选择符

. 使用点符号表示，类表示引用此类的所有元素将享受这一css属性设置，类选择符常常用于css代码复用

2.3 包含选择符

使用空格来表示，主要在于包含在元素内部的子元素进行选择，如 p strong ，p标签内部的所有strong标签

2.4 子选择符

> 使用大于符号表示 与包含选择符相比，子选择符只选择包含在元素内部的一个子元素，如 body>strong 选择body下面的第一个strong，这里如果body>p>strong是不相同的，注意区别 容器级别

2.5 相邻选择符

+使用加号表示，表示某元素同一个父级元素下面的后一个元素，如p+strong 表示与p同级别且在p后面的strong元素

<p>你是我的小雅削苹果<strong>我是p的子元素可以使用子选择符来选择我 哈哈</strong></p>

<strong>我是p的邻居 哈哈</strong>

2.6 id选择符

# 使用＃表示，也是非常简单的选择符

2.7 组合选择符

选择符有平级和包含关系，在这些关系中可以任意关系多个选择付进行组合，只不过平级之间的组合使用逗号分隔符，而包含关系则使用空格符号， 如p.content:p标签内部使用了类content的所有元素

而平级组合关系，p,h1,h2：p h1 h2 他们共同进行css样式设置

2.7 伪类

a:link  a标签在未被访问之前的样式

a:hover a标签在鼠标滑动上去时候的样式

a:visited a标签在访问过后的样式

a:active a标签在鼠标单击，并在鼠标释放之前的样式

2.8 伪对象

:before 元素之前的内容  p:before{content:"我是p前面的内容"}

:after  元素之后的内容 p:after{content:"我是p后面的内容，有时候我也是一个字体图形"}

p:first-child :p元素作为某个元素的第一个子元素时所使用的样式，比如li:first-child 意思是所有列表中第一列元素使用什么样的样式，因为li必然是ol或者ul的第一个子元素

p:first-letter  p元素的首字母样式

p:first-line p元素的第一行样式（限制仅用于块级元素，对于行内 内联元素不适用）

2.9 属性选择符

属性选择符的意思是对于某个元素或者某些元素具有属性满足指定条件的元素

1）h1[class]：所有使用了class的h1标签，不管class的值是多少都满足条件

2）h1[class="a"] 所有class为a的h1标签  完全匹配

3）a[class][title]既使用了class也使用了title属性的a标签元素  完全匹配

4）p[class~="waring-"]:class中包含waring的p标签  包含匹配

5）p[class^="bar"] class属性以bar开头的p标签

6）p[class$="bar"] class属性以bar结尾的p标签

7）p[class*="bar"] class属性包含bar的p标签

8）p[class|="bar"] class属性等于或以bar开头的p标签

3 css优先级计算方法

元素选择符优先级+1

类选择符优先级 +10

id选择符优先级+100

行内样式优先级+1000

!important 优先级高于一切

4 css文件管理

css文件通过link标签引入html文档，也可以使用@import导入到文档内部，也可以导入到某个css文件就像依赖关系一般，但是被导入的css文件通常在最后才被解析，但是@import必须写在css问的最前面，

这样主要用于css文件的复用，也方便多个css进行集成，利于维护

今天就写到这里吧，明天再看下一章节，总之这次一定要坚持坚持啊，把前端基础补上来进可以向h5发展，退则可坚守web