初步了解二 CSS

前端CSS 学习笔记

（颜色 样式表 权重 字体 背景 外观 选择器 阴影 ）
了解CSS
一. CSS 页面的美容师
作用：
主要用于设置 HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。
CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。

二. CSS初识
CSS (Cascading Style Sheets)
CSS通常称为CSS样式表或层叠样式表(级联样式表) 主要用于设置HTML页面中的文本内容 ( 字体 大小 对齐方式等 ) 图片的外形 ( 宽高 边框样式 边距等 ) 以及版面的布局等外观显示样式。
三. CSS 字体样式属性**

1. font系列：font-size : 字号大小；font-family : 字体；font-weight:字体粗细；font-style: 字体风格。

   1. font-size : 字号大小 相对长度单位 ：em 相对文本的字体尺寸 ，px 像素
      绝对长度单位 ：in 英寸，cm 厘米 ，mm 毫米 ，pt 点。
      谷歌浏览器默认的文字大小为16px。

   2. font-family : 字体 用于设置字体 网页中常用的字体有宋体 微软雅黑 黑体等
      

   3. font-weight:字体粗细 font-weight属性用于定义字体的粗细 其可用属性值: normal bold bolder lighter 100-900(100的整数倍)。

   4. font-style: 字体风格
      font-style属性用于定义字体风格 如设置斜体 倾斜 或正常字体 其可用属性值如下
      normal : 默认值 浏览器会显示标准的字体样式
      italic: 浏览器会显示斜体的字体样式
      oblique: 浏览器会显示倾斜的字体样式。

   5. font:综合设置字体样式(重点)
      font属性用于对字体样式进行综合设置 基本语法格式如下:
      选择器**{font: font-style font-weight font` size/line-height font-family}**使用font属性时 必须按上面语法格式中的书写 顺序 不能更换顺序 各属性用空格隔开
      注意: 其中不需要设置的属性可以省略(取默认值)但必须保留font-size和font-family属性 否则将不起作用。

四** 选择器(重点)**

1. 选择器的作用：找到特定的HTML页面元素。
   ① 标签选择器(元素选择器)
   标签选择器是指用HTML标签名称作为选择器 按标签名称分类 为页面中某一类标签指定统一的CSS样式 其基本语法如下
   标签名{属性1:属性值1;属性2:属性值2;属性3:属性值3;} 或者
   元素名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}
   标签选择器最大的优点是能快速为页面中同类型的标签统一样式,同时这也是他的缺点 不能设计差异化样式
   ② 类选择器
   class 类选择器使用 “.” (英文点号) 进行标识 后面紧跟类名 其基本语法格式如下:
   .类名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;} 标签调用的时候用 class="类名"类选择器最大的优势是可以为元素对 象定义单独或相同的样式
2. 多类名选择器
   1. 样式显示效果跟HTML元素中的类名先后顺序没有关系 受CSS样式书写的上下顺序有关
   2. 个各类名中间用空格隔开
      ③ id选择器（元素的ID值是唯一的）
      id选择器使用"#"进行标识 后面紧跟 id 名 其基本语法格式如下 :
      #id名{属性1: 属性值1; 属性2: 属性值2; 属性3: 属性值3;}。
      ④ 伪类选择器
      :link 未访问的连接
      :visited 已访问的连接
      :hover 鼠标移动到连接上
      :active 选定的连接
   3. 结构(位置)伪类选择器(CSS3)
      :first-child: 选取属于其父元素的首个子元素指定选择器
      :last-child: 选取属于其父元素的最后一个子元素的指定选择器
      :nth-child(n): 匹配属于其父元素的第N个子元素 不论元素的类型
      :nth-last-child(n): 选择器匹配属于其元素的第N个子元素的每个元素 不论元素的类型 从最后一个子元素开始计数
      n可以是数字、关键词或公式
   4. 通配符选择器
      通配符选择器用"*"号表示他是所有选择器中作用范围最广的 能匹配页面中所有的元素 基本语法如下 :
      {属性1: 属性值1; 属性2: 属性值2; 属性3: 属性值3;}
      例如下面的代码 使用通配符选择器定义CSS样式 清楚所有HTML标记的默认边距
      • {
        margin: 0; /定义外边距/
        padding: 0; /定义内边距/
        }
   5. 目标伪类选择器
      :target 目标伪类选择器 : 选择器可用于选取当前活动的目标元素

五**. CSS外观属性**

1. 外观类型 ： color: 文本颜色；line-height: 行间距；text-align: 水平对齐方式；text-indent : 首行缩进；letter-spacing : 字间距；word-spacing : 单词间距；word-break: 自动换行；颜色半透明(CSS3)；文字阴影(CSS3)。

2. color: 文本颜色
   color属性用于定义文本的颜色 其取值方式有如下3种:
   1.预定义的颜色值 如 red green blue 等
   2.十六进制, 如#FF0000 = #F00, #FF6600 #F60, #29D794等 实际工作中 十六进制是最常用的定义颜色的方式
   3.RGB代码 如容色可以表示为 rgb(255,0,0) 或者 rgb(100%,0%,0%)
   需要注意的是 使用RGB代码百分颜色值 取值为0时也不能省略百分号 必须写为0%

3. line-height: 行间距 行间距与盒子高度一致时，意味着文本内容在中间位置，常用于定义垂直居中对齐。
   line-height 属性用于设置行间距 就是行与行之间的距离 即字符的垂直间距 一般称为行高 line-height常用的属性单位有三种, 分别为像素px 相对值rem 百分比% 实际工作中使用最多的是像素px

4. text-align: 水平对齐方式
   left : 左对齐(默认值)
   right : 右对齐
   center : 居中对齐

5. text-indent : 首行缩进
   text-indent属性用于设置首行文本的缩进 其属性值可为不同单位的数值 em字符宽度的倍数 或相对于浏览器窗口宽度的百 分比% 允许使用负值 建议使用em作为设置单位
   1em 就是一个字的宽度 如果是汉字的段落 1em就是一个汉字的宽度

6. letter-spacing : 字间距
   letter-spacing属性用于定义字间距 所谓字间距就是字符与字符之间的空白 其属性值可谓不同单位的数值 允许使用负值 默认为 normal

7. text-decoration 文本的装饰
   text-decoration 通常我们用于给链接修改装饰效果
   none 默认。定义标准的文本。 取消下划线（最常用）
   underline 定义文本下的一条线。下划线 也是我们链接自带的（常用）
   overline 定义文本上的一条线。（不用）
   line-through 定义穿过文本下的一条线。（不常用）

8. word-spacing : 单词间距
   word-spacing属性用于定义英语单词之间的间距 对中文字符无效 和 letter-spacing一样 其属性值可为不同单位的数值 允许使 用负值 默认为 normal
   注意：word-spacing和letter-spacing均可对英文进行设置 不同的是letter-spacing定义的为字母之间的间距 而word-spacing 定义的为英文单词之间的间距

9. word-break: 自动换行
   normal 使用浏览器默认的换行规则
   break-all 允许在单词内换行
   keep-all 只能在半角或连字符处换行

10. 颜色半透明(CSS3)
    文字颜色到了CSS3我们可以采取半透明的格式了 语法格式如下 :
    color: rgba(r,g,b,a) a是alpha 透明的意思 取值范围 0~1

11. 文字阴影(CSS3)
    以后我们可以给我们的文字添加阴影效果 Shadow 影子
    text-shadow: 水平位置 垂直位置 模糊距离 阴影颜色
    

六 引入CSS样式表

内部样式表；行内式(内联样式)；外部样式表(外链式)

1. 内部样式表
   内嵌式是将CSS代码集中写在HTML文档的head头部标签中 并且用style标签定义 语法中, style标签一般位于head标签中title 标签之后,也可以把他放在HTML文档的任何位置

2. 行内式(内联样式)
   内联样式 又有人称行内样式 行间样式 内嵌样式 是通过标签的style属性来设置元素的样式

3. 外部样式表(外链式)
   链入式是将所有的样式放在一个或多个以 .css 为扩展名的外部样式表文件中 通过link标签将外部样式表文件链接到HTML文档中,其基本语法格式如下:
   head>
   link rel=“stylesheet” type=“text/CSS” href=“css文件的路径”
   head
   rel 定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。
   type 定义所链接文档的类型，在这里需要指定为“text/CSS”，表示链接的外部文件为CSS样式表（HTML5中可以省略）。
   href 定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。

七 标签显示模式 (display)

1. 标签隐藏 display：none 标签显示 display：block
   标签的显示与隐藏注意要要点：隐藏：是元素本身，显示：指在其父级的hover中显示，即在对其父级进行hover时， 元素本身进行显示 。
   块级元素(block-level) 行内元素 (inline-level) 行内块元素(inline-block)
   块级元素(block-level)
   每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度 高度 对齐等属性 常用语网页布局和网页结构的搭建

2. 行内元素 (inline-level)
   行内元素(内联元素)不占有独立的区域 仅仅靠自身的字体大小和图像尺寸来支撑结构 一般不可以设置宽度 高度 对齐等属性 常用于控制页面中文本的样式

3. 行内块元素(inline-block)
   1和相邻行内元素(行内块)在一行上 但是之间会有空白缝隙
   2 默认宽度就是他们本身内容的宽度
   3高度 行高 内外边距可以以控制

   标签显示模式转换 display
   块转行内 : display: inline;
   行内转块 : display: block;
   块、行内元素转换为行内块 : display : inline-block;

八 CSS复合选择器

1. 复合选择器是由两个或多个基础选择器 通过不同的方式组合而成的 目的是为了可以选择更精准更精细的目标元素标签 常见类型有交际选择器，并集选择器，后代选择器，子元素选择器。
2. 交际选择器
   交际选择器由两个选择器构成 其中第一个为标签选择器 第二个为 class 选择器 两个选择器之间不能有空格。
3. 并集选择器
   并集选择器(css选择器分组)是各个选择器通过逗号链接而成 任何形式的选择器(包括标签选择器,class类选择器id选择器等),都可以作为并集选择器的一部分 如果某些选择器定义的样式完全相同 或 部分相同 就可以利用并集选择器为他们定义相同的CSS样式
4. 后代选择器
   后 代选择器又称为包含选择器 用来选择元素或元素组的后代 其写法就是把外层标签写在前面 内层标签写在后面 中间用空格分隔 当标签发生嵌套时 内层标签就称为外层标签的后代。
5. 子元素选择器
   子元素选择器只能选择作为某元素子元素的元素 其写法就是把父级标签写在前面 子级标签写在后面 中间跟一个 > 进行连接 注意 符号左右两侧各保留一个空格!

九 css背景（background）

背景颜色 background-color ； 背景图片 background-image；背景平铺 background-repeat； 背景位置(position) background-position； 背景附着 background-attachment； 背景透明(CSS3) background：rgba（）

1. 背景颜色 background-color 预定义的颜色值/十六进制/RGB代码
   语法： background-color:颜色值; 默认的值是 transparent 透明的

2. 背景图片 background-image url(图片路径)
   语法： background-image : none | url (url)
   none 无背景图（默认的）
   url 使用绝对或相对地址指定背景图像

3. 背景平铺 background-repeat
   语法： background-repeat : repeat | no-repeat | repeat-x | repeat-y
   repeat 背景图像在纵向和横向上平铺（默认的）
   no-repeat 背景图像不平铺 （常用）
   repeat-x 背景图像在横向上平铺
   repeat-y背景图像在纵向平铺

4. 背景位置(position) background-position （常用在精灵图上）
   使用背景位置前 必须先指定background-image属性
   语法： position top center | bottom | left | center | right 方位名词
   length 百分数 | 由浮点数字和单位标识符组成的长度值

   注意 ：position 后面是x坐标和y坐标。 可以使用方位名词或者 精确单位。
   如果只指定了一个方位名词，另一个值默认居中对齐。
   如果只指定一个数值,那该数值一定是x坐标，另一个默认垂直居中
   如果指定的两个值是 精确单位和方位名字混合使用，则第一个值是x坐标，第二个值是y坐标

5. 背景附着 background-attachment 背景附着就是解释背景是滚动的还是固定的
   语法： background-attachment : scroll | fixed
   scroll 背景图像是随对象内容滚动
   fixed 背景图像固定

6. 背景透明(CSS3) background：rgba（）
   background: rgba(0, 0, 0, 0.3);
   我们习惯把0.3 的 0 省略掉 这样写 background: rgba(0, 0, 0, .3);

7. 背景简写
   背景简写 ：背景颜色 背景图片地址 背景平铺 背景滚动 背景位置; 他们没有顺序

十 CSS 三大特性
CSS层叠性 CSS继承性 CSS优先级

1. CSS继承性
   子元素可以继承父元素的样式（text-，font-，line-这些元素开头的可以继承，以及color属性）

2. CSS优先级
   选择器相同，则执行层叠性
   选择器不同，就会出现优先级的问题。

继承或者 *0,0,0,0每个元素
（标签选择器）0,0,0,1
每个类，伪类0,0,1,0
每个ID0,1,0,0
每个行内样式 style=""1,0,0,0
每个!important 重要的∞ 无穷大 div { color: pink!important; }