前端重学笔记-CSS篇-01

CSS最大价值:由HTML专注去做结构呈现，样式交给css，即结构(HTML)与样式(CSS)相分离。

• 选择器是用于指定 CSS 样式的 HTML标签，花括号内是对该对象设置的具体样式
• 属性和属性值以“键值对”的形式出现
• 属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等
• 属性和属性值之间用英文“:”分开
• 多个“键值对”之间用英文“;”进行区分

样式书写格式：

** CSS选择器的作用：**

选择器分类

选择器分为基础选择器和复合选择器两个大类。
基础选择器是由单个选择器组成的。又包括:标签选择器类选择器、id选择器和通配符选择器

标签选择器

**标签选择器(元素选择器)**是指用 HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的 CSS 样式。

作用：
标签选择器可以把某一类标签全部选择出来，比如所有的

标签和所有的标签。
优点：
能快速为页面中同类型的标签统一设置样式。
缺点：
不能设计差异化样式，只能选择全部的当前标签

类选择器

如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器类选择器在 HTML 中以 class 属性表示，在CSS 中，类选择器以一个点“.”号显示

注意

• 类选择器使用“.”(英文点号)进行标识,后面紧跟类名(自定义，我们自己命名的)。
• 可以理解为给这个标签起了一个名字，来表示。
• 长名称或词组可以使用中横线来为选择器命名。
• 不要使用纯数字、中文等命名，尽量使用英文字母来表示。
• 命名要有意义，尽量使别人一眼就知道这个类名的目的。

类命名规则

头header内容content/container尾footer导航nav侧栏sidebar栏目column页面外围控制整体布局宽度wrapper左右中 left right centerr登录条loginbar标志logo广告banner页面主体main热点hot新闻news下载download子导航subnav菜单menu子菜单submenue搜索search友情链接 friendlink

类选择器的特殊使用-多类名

多类名开发中使用场景

• 可以把一些标签元素相同的样式(共同的部分)放到一个类里面。
• 这些标签都可以调用这个公共的类,然后再调用自己独有的类。
• 从而节省CSS代码,统一修改心非常方便。

id选择器

id 选择器可以为标有特定id 的 HTML元素指定特定的样式。
HTML 元素以 id 属性来设置id 选择器，CSS 中 id 选择器以“**#**"来定义。

id 选择器和类选择器的区别

• 类选择器(class)好比人的名字，一个人可以有多个名字,同时一个名字也可以被多个人使用。
• id 选择器好比人的身份证号码，全中国是唯一的，不得重复。
• id 选择器和类选择器最大的不同在于使用次数上。
• 类选择器在修改样式中用的最多，id 选择器一般用于页面唯一性的元素上，经常和 JavaScript 搭配使用,。

通配符选择器

在 CSS 中，通配符选择器使用“*****”定义，它表示选取页面中所有元素(标签) 。通配符选择器不需要调用，自动就给所有的元素使用样式。特殊情况才使用。