13518219792
“css的样式规则是:由选择器和声明块两个基本部分组成的。选择器决定为哪些元素应用样式;声明块定义相应的样式,它包含在一对花括号内,有一条或多条声明组成,而每一条声明则由一个属性和一个值组成,中间用冒号隔开
成都创新互联公司是一家集成都网站建设、网站建设、网站页面设计、网站优化SEO优化为一体的专业的建站公司，已为成都等多地近百家企业提供网站建设服务。追求良好的浏览体验,以探求精品塑造与理念升华,设计最适合用户的网站页面。 合作只是第一步，服务才是根本,我们始终坚持讲诚信，负责任的原则，为您进行细心、贴心、认真的服务,与众多客户在蓬勃发展的市场环境中,互促共生。
1. 标签名选择器 div { color：Red;} 即页面中的各个标签名的css样式
2.类选择器 .divClass {color:Red;} 即定义的每个标签的class 中的css样式
3.ID选择器 #myDiv {color:Red;} 即页面中的标签的id
4.后代选择器（类选择器的后代选择器） .divClass span { color:Red;} 即多个选择器以逗号的格式分隔 命名找到准确的标签
CSS选择器就是指定CSS要作用的标签，那个标签的名称就是选择器。意为：选择哪个容器。
CSS选择器分类：
标签选择器、类选择器、ID选择器、全局选择器、群组选择器、后代选择器、伪类选择器
1、html标签选择器：
定义：以html标签作为选择器
2、class类选择器：
定义：为HTML标签添加class属性，通过类选择器来为具有此class属性的元素设置css样式。
类选择器也可以对不同类型元素的同一个名称的类选择器设置不同的样式规则：
同一个元素可以设置多个类，之间用空格隔开：
3、ID选择器
定义：为HTML标签添加ID属性，通过ID选择器来为具有此ID的元素设置CSS规则
4、群组选择器
定义：集体统一设置样式
5、全局选择器
定义：所有标签设置样式
HTML文档结构图
6、后代选择器
定义：使用后代选择器设置，之间用空格隔开，后代选择器可以多层。
7、伪类选择器
链接的四种状态：激活状态，已访问状态，未访问状态，鼠标悬停状态。
伪类
说明
:link
未访问的链接
:visited
已访问的链接
:hover
鼠标悬停状态
:active
激活的链接
:hover 用于访问的鼠标经过某个元素时；
:active 用于一个元素被激活时（即按下鼠标之后放开鼠标之前的状态）
伪类选择器的属性：link visited hover active
说明：
1) a:hover 必须置于 a:link和a:visited之后，才有效
2) a:active 必须置于 a:hover之后才有效
3) 伪类名称对大小写不敏感
8、CSS其它选择器
css继承特性，从父元素那继承部分css属性
选择器的优先级
ID选择优先级最高（id选择器定义具有唯一性）
class选择器次之（class选择器可以多个）
元素选择器再次之
其它选择器优先级主要根据定义的先后顺序，最后定义的优先级高
!important 加重选择器的优先级，添加在样式规则之后，中间用空格隔开。
CSS选择器命名规则
1：采用英文字母，数字以及"-" 和 "_" 命名
2：以小写字母开头，不能以数字和"-" 和 "_" 开头
3：使用有意义的命名规范
常用CSS命名
header
页头
main
主体
footer
页尾
nav
导航
sidebar
侧栏
container
容器
column
栏目
title
标签
menu
菜单
submenu
子菜单
*列举常用命名，大家根据自身项目及团队的规则命名
耐心学习基础知识，基础是盖房的根基，必须打结实。
如果您觉得有用，记得在下方点赞、关注、留言，我会定期奉 上更多的惊喜哦，您的打赏支持才是我继续努力的动力，么么哒。
每日分享在学习过程中总结的学习经验，学习笔记，笔试题，HTML，CSS，JavaScript，jQuery教程，Vue教程，PHP教程，TinkPHP教程等，望大家能以学习为目的，每天阅读一篇文章，了解身边的技术。陪有梦想的人一起成长！
1、内联样式表
直接在HTML标记内，插入sytle属性，再定义要显示的样式，这是最简单的样式定
义方法。不过，利用这种方法定义样式时，效果只可以控制该标记，其语法如下：
标记名称 style="样式属性:属性值;样式属性:属性值"
如：body style=" color:#FF0000;font-family:"宋体";cursor:url(3151.ani);"
2、 嵌入样式表
style type="text/css"
内部样式表是把样式表放到页面的head区里，这些定义的样式就应用到页面中了，样式表是用style标记插入的
head
……
style type="text/css"
!--
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
--
/style
……
/head
style元素是用来说明所要定义的样式。TYPE属性是指定style元素以css的语法定义。有些低版本的浏览器不能识别style标记，这意味着低版本的浏览器会忽略style标记里的内容，并把style标记里的内容以文本直接显示到页面上。为了避免这样的情况发生，我们用加HTML注释的方式!-- 注释 --隐藏内容而不让它显示。
3、外部样式表
link href="样式表地址" rel="stylesheet" type="text/css" /
4、输入样式表
可以使用css的@import声明将一个外部样式表文件输入到另外一个css文件中，被输入的css文件中的样式规则定义语句就成为了输入到的css文件的一部分，也可以使用@import声明将一个css文件输入到网页文件的style/style标签对中，被输入的css文件中的样式规则定义语句就成了style/style标签对中的语句。
style
@import url(http://……)
/stypel
一、Css书写顺序：
1.位置属性(position, top, right, z-index, display, float等)
2.大小(width, height, padding, margin)
3.文字系列(font, line-height, letter-spacing, color- text-align等)
4.背景(background, border等)
5.其他(animation, transition等)
二、Css语法：
命名一般为小写英文字母。
为了代码的易读性，在每个声明块的左花括号前添加一个空格。
每条声明语句的 : 后应该插入一个空格。
所有声明语句都应当以分号结尾。最后一条声明语句后面的分号是可选的，但是，如果省略这个分号，你的代码可能更易出错。
对于属性值或颜色参数，省略小于 1 的小数前面的 0 （例如，.5 代替 0.5；-.5px 代替 -0.5px）。
十六进制值应该全部小写，例如，#fff。
尽量使用简写形式的十六进制值，例如，用 #fff 代替 #ffffff。
避免为 0 值指定单位，例如，用 margin: 0; 代替 margin: 0px;。
Css常用的一些命名：
可参考：CSS 常用命名 - 彼岸时光 - 博客园。
三、Css的引入：
Css的引入一般有两种，link和@import,一般建议使用link引入。这样可以避免考虑@import的语法规则和注意事项，避免产生资源文件下载顺序混乱和http请求过多的烦恼。
四、Css的命名规范(BEM,OOCSS)：
什么是BEM：BEM的意思就是块（block）、元素（element）、修饰符（modifier）,是由Yandex团队提出的一种前端命名方法论。这种巧妙的命名方法让你的CSS类对其他开发者来说更加透明而且更有意义。
命名约定如下：
.block{} // 块即是通常所说的 Web 应用开发中的组件或模块。每个块在逻辑上和功能上都是相互独立的。
.block__element{} // 元素是块中的组成部分。元素不能离开块来使用。BEM 不推荐在元素中嵌套其他元素。
.block--modifier{} // 修饰符用来定义块或元素的外观和行为。同样的块在应用不同的修饰符之后，会有不同的外观。
优点：
BEM 的优点在于所产生的 CSS 类名都只使用一个类别选择器，可以避免传统做法中由于多个类别选择器嵌套带来的复杂的属性级联问题。在 BEM 命名规则中，所有的 CSS 样式规则都只用一个类别选择器。因此所有样式规则的特异性（specificity）都是相同的，也就不存在复杂的优先级问题。这可以简化属性值的层叠规则。代码清单中的命名规则的好处在于每个 CSS 类名都很简单明了，而且类名的层次关系可以与 DOM 节点的树型结构相对应。
缺点：
这样类名过于长，且复杂。
什么是OOCSS（面向对象CSS）：
OOCSS 表示的是面向对象 CSS（Object Oriented CSS），是一种把面向对象方法学应用到 CSS 代码组织和管理中的实践。 OOCSS最关键的一点就是：提高他的灵活性和可重用性。这个也是OOCSS最重要的一点。OOCSS主张是通过在基础组件中添加更多的类，从而扩展基础组件的CSS规则，从而使CSS有更好的扩展性。
OOCSS的优点：
减少CSS代码。
具有清洁的HTML标记，有语义的类名，逻辑性强的层次关系。
语义标记，有助于SEO。
更好的页面优化，更快的加载时间（因为有很多组件重用）。
可扩展的标记和CSS样式，有更多的组件可以放到库中，而不影响其他的组件。
能轻松构造新的页面布局，或制作新的页面风格。
OOCSS的缺点：
OOCSS适合真正的大型网站开发，因为大型网站用到的可重用性组件特别的多，如果运用在小型项目中可能见不到什么成效。所以用不用OOCSS应该根据你的项目来决定。如果没用巧妙的使用，创建组件可能对于你来说是一堆没用的东西，成为一烂摊子，给你的维护带来意想不到的杯具，说不定还是个维护的噩梦。
欢迎到优就业来了解
