### CSS基本样式与元素

CSS基本样式与元素

1、什么是CSS?

层叠样式表(Cascading Style Sheets,简写CSS),是一种用来为HTML文档添加样式(字体、间距、位置、颜色、角度等显示效果)的计算机语言
HTML是内容的展示,CSS是内容的装饰

---

2、CSS的引用方式(三种)

①行内样式:在开始标签的内部可以设置一个叫做Style的属性,属性的双引号内存放该元素代码的CSS样式。
Eg:<div style=’‘存放该元素的CSS样式代码’’>
②内部样式:在head标签中间新建一个style标签,该标签内部存放的就是网页文件中的CSS代码.
CSS中的代码注释格式采用的是：/* 注释文字 */
③外部样式:在head标签中间新建一个link标签，通过href属性设置外部CSS文件地址。
rel是relationship的缩写（指定当前文档与被链接文档的关系）rel=“stylesheet”表示我们引用的是一个样式表（CSS）文件

---

3、选择器的类型(3种)

1.标签选择器：h1-h6，div，span，p，ul，li，ol，dl，a，img等等
2.类选择器:在标签中添加一个属性，class=“类名”，理解为：取的别名
多类名选择器:同一个标签,取多个名字.
3.ID选择器:在标签中添加一个属性，id=“id名”，具有唯一性，体现在操作js的时候
id选择器和类选择器区别：
① W3C标准规定，在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class。
② 类选择器，好比人的名字，是可以多次重复使用的，比如张伟、王伟、李伟、李娜。
③ id选择器，好比人的身份证号码，全中国是唯一的，不得重复。只能使用一次。
④ 为避免代码出现冲突，大骨架用id命名，里面的小结构用class。

       CSS命名规范：
       ① 必须以字母开头命名选择器，这样可保证在所有浏览器下都能兼容；
       ② 不允许单个字母的类选择器出现；
       ③ 不允许命名带有广告等英文的单词，例如ad、adv、adver、advertising，以防止该模块被浏览器当成垃圾广告过滤掉；
       ④ 一律小写；
       ⑤ 尽量用英文；
       ⑥ 不加中杠和下划线；
       ⑦ 尽量不缩写，除非一看就明白的单词。
       PS：PPT中有相关文件。

4、CSS代码的基本格式

1、元素/标签命名的基本格式:
命名规范:数字、字母、,不能以一或者数字开头.(软要求)见名知意.
clss:谁都可以取,可以取任意次
ID:只能是唯一的,一旦被使用了一次,其他再也不能用.

clss:一个元素可以拥有多个class
所有元素的class允许重复的
ID:一个元素中最多只能拥有一个ID
当前html文档中,不允许有任意两个元素的ID相同

2、 CSS样式设置的基本格式:

选择器：选择元素的器具或是工具

声明块:存放一个元素具体的样式代码.

单条样式代码的设置格式为：
样式名称:样式值;
样式名称+冒号+样式值+分号

---

5、常用样式类别

尺寸样式: 宽度 width
高度:height

           水平位置:margin-left 左边
    	          margin-right 右边	    

位置样式:margin(外边距)
垂直位置:magrin-top 上部
magrin-bottom 底部
margin的复合写法:
四个参数:上,右,下,左
两个参数:上下,左右
一个参数:四个方向距离一致
清除默认边距:marigin:0;
左右margin如果是auto,那么盒子会水平居中marg:0 auto

装饰样式:元素颜色(背景颜色)background一color

颜色值三种写法：

​ 1.颜色的单词；

​ 2.rgb(0-255,0-255,0-255)；

​ 3.十六进制数，三位或六位。*/
文字样式:文字大小:浏览器默认渲染14px :ont-size
​ 文字字体:font-family
​ 文字颜色:文字颜色，颜色写法和背景颜色一致:olor