• CSS总结

    1.为什么用CSS

    1.1 HTML的局限性

    html只关注内容的语义。比如

    表明这是一个大标题，

    表明这是一个段落，表明这儿有一个图片，表示此处有链接

    1.2 CSS-美化网页

    CSS 是层叠样式表( Cascading Style Sheets ) 的简称

    有时我们也会称之为CSS 样式表或级联样式表

    CSS是也是一种标记语言

    CSS 主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式边距等)以及版面的布局和外观显示样式

    CSS 让我们的网页更加丰富多彩，布局更加灵活自如。简单理解:CSS可以美化 HTML,让HTML更漂亮让页面布局更简单

    总结:

    1. HTML主要做结构,显示元素内容

    2. CSS美化HTML,布局网页

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

    1.3 CSS 语法规范

    使用 HTML时，需要道从一定的规范，CSS 也是如此，要想熟练地使用CSS 对网页进行修饰，首先需要了解CSS 样式规则。

    CSS 规则由两个主要的部分构成: 选择器以及一条或多条声明

    1. 选择器是用于指定CSS样式的 HTML 标签，花括号内是对该对象设置的具体样式

    2. 属性和属性值以“键值对”的形式出现

    3. 属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等

    4. 属性和属性值之间用英文“:”分开

    5. 多个“键值对”之间用英文“;”进行区分

    1.4 CSS 代码风格

    1.样式格式书写

    紧凑格式

     h3 ( color: deeppink; font-size: 20px; )

    展开格式

     h3 (
     color: pink;
     font-size: 20px;
 }

    第二种格式更为直观

    2.样式大小写

     h3 (
     color: pink;
 }
     H3{
     COLOR: PINK;
 }

    强烈推荐样式选择器，属性名，属性值关键字全部使用小写宇母，特殊情况除外。

    3.空格规范

     h3 (
  color: pink;
 )

    属性值前面，冒号后面，保留一个空格

    选择器( 标签)和大括号中间保留空格

    2.选择器

    2.1 css选择器的作用

    选择器(选择符)就是根据不同需求把不同的标签选出来这就是选择器的作用。 简单来说，就是选择标签用的.

    1. 找到所有的h1 标签。 选择器(选对人)

    2. 设置这些标签的样式，比如颜色为红色( 做对事)

    2.2 选择器分类

    选择器分为基础选择器和复合选择器两个大类

    基础选择器是由单个选择器组成的

    基础选择器又包括:标签选择器、类选择器、id 选择器和通配符选择器

    2.3 标签选择器

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

    语法：

     标签名{
     属性1: 属性值1;
     属性2: 属性值2;
     属性3: 属性值3;
     ...
 }

    作用

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

    标和所有的span>标

    优点

    能快速为页面中同类型的标签统一设置样式

    缺点

    不能设计差异化样式，只能选择全部的当前标签

    2.4 类选择器

    如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器

    语法

     类名{
     属性1: 属性值1;
     ......
 }

    例如，将所有拥有red类的 HTML 元素均为红色

     .red {
  color: red;
 }

    结构需罗用class属性来调用 class 类的意思

     

    变红色

    注意

    1. 类选择器使用“.” (英文点号 )进行标识，后面紧跟类名(白定义，我们自己命名的 )

    2. 可以理解为给这个标签起了一个名字，来表示

    3. 长名称或词组可以使用中横线来为选择器命名。

    4. 不要使用纯数字、中文等命名，尽量使用英文字母来表示

    5. 命名要有意义，尽量使别人一眼就知道这个类名的目的

    记忆口诀:样式点定义，结构类调用。一个或多个，开发最常用

    我们可以给一个标签指定多个类名，从而达到更多的选择目的。这些类名都可以选出这个标签简单理解就是一个标签有多个名字.

    1.多类名使用方式

     

    亚瑟

    1. 在标签class 属性中写多个类名

    2. 多个类名中间必须用空格分开

    3. 这个标签就可以分别具有这些类名的样式

    2.多类名开发中使用场景

    1. 可以把一些标签元素相同的样式(共同的部分)放到一个类里面

    2. 这些标签都可以调用这个公共的类,然后再调用自己独有的类

    3. 从而节省CSS代码,统一修改也非常方便.

     
    亚瑟
    
 
    刘备
    
 
    貂蝉

    1. 各个类名中间用空格隔开

    2. 简单理解:就是给某个标签添加了多个类，或者这个标签有多个名字

    3. 这个标签就可以分别具有这些类名的样式

    4. 从而节省CSS代码,统一修改也非常方便

    5. 多类名选择器在后期布局比较复杂的情况下，还是较多使用的

    2.5 id 选择器

    id 选择器可以为标有特定id的HTML元素指定特定的样式

    HTML元素以id 属性来设置id 选择器，CSS中id 选择器以“#"来定义

    语法：

     #id名(
     属性1: 属性值1;
     ...
 }

    例如，将id 为nav 元素中的内容设为红色

     #nav {
     color：red;
 }

    注：id属性只能在每个HTML文档中出现一次。

    口诀：样式#定义，结构id调用，只能调用一次，别人切勿使用

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

    1. 选择器(class)好比人的名字，一个人可以有多个名字，同时一个名字也可以被多个人使用

    2. id 选择器好比人的身份证号码，全中国是唯一的，不得重复

    3. id 选择器和类选择器最大的不同在于使用次数上

    4. 类选择器在修改样式中用的最多，id 选择器一般用于页面唯一性的元素上，经常和JavaScript 搭配使用

    2.6 通配符选择器

    在CSS中，通配符选择器使用“*”定义，它表示选取页面中所有元素(标签)

    语法

     *{
 属性1: 属性值1;
 ...
 }

    通配符选择器不需要调用，自动就给所有的元察使用样式

    特殊情况才使用，以下是清除所有的元素标签的内外边距

     *{
     margin: 0;
     padding: 0;
 }

    2.7基础选择器总结

    1. 每个基础选择器都有使用场景，都需要掌握

    2. 如果是修改样式，类选择器是使用最多的

    3.字体

    3.1 字体系列

    CSS Fonts(字体)属性用于定义字体系列大小粗细和文字样式(如斜体)

    CSS使用 font-family 属性定义文本的字体系列

     p{ font-family:"微软雅黑";}
 div {font-family: Arial,"Microsoft yahei"，微新雅黑;}

    各种字体之间必须使用英文状态下的逗号隔开

    一般情况下,如果有空格隔开的多个单词组成的字体加引号

    尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示

    最常见的几个字体: body{font-family ，“Microsoft YaHei”。Tahoma。Arial，“Hiraqino Sans GB”；}

    3.2 字体大小

    CSS使用 font-size 属性定义字体大小

     P{
     font-size: 20px;
 }

    1. px(像素)大小是我们网页的最常用的单位

    2. 谷歌浏览器默认的文字大小为16px

    3. 不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小

    4. 可以给 body指定整个页面文字的大小

    3.3 字体粗细

    CSS 使用 font-weight属性设置文本字体的粗细

     p{
     font-weight: bold;
 }

    3.4 文字样式

    CSS使用 font-style 属性设置文本的风格

     P {
     font-style: normal;
 }

    3.5 字体复合属性

    字体属性可以把以上文字样式综合来写,这样可以更节约代码

     body {
     font: font-style font-weight font-size/line-height font-family
 }

    1. 使用 font 属性时，必须按上面语法格式中的顺序书写，不能更换顺序，并各个属性间以空格隔开

    2. 不需要设置的属性可以省略(取默认值)，但必须保留font-size和 font-family属性，否则font 属性将不起作用

    3.6 字体属性总结

    4.文本

    4.1 文本颜色

    color 属性用于定义文本的颜色。

     div {
     color: red;
 }

    开发中最常用的是十六进制.

    4.2 文本对齐

    text-align属性用于设置元素内文本内容的水平对齐方式

     div {
     text-align: center;
 }

    4.3 修饰文本

    text-decoration 属性规定添加到文本的修饰。可以给文本添加下划线、删除线、上划线等

     div (
     text-decoration: underline;
 }

    4.4 文本缩进

    text-indent属性用来指定文本的第一行的进，通常是将段落的首行缩进

     div (
 text-indent: 10px;
 }

    通过设置该属性，所有素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值

     P{
 text-indent: 2em;
 }

    em 是一个相对单位，就是当前元素(font-size)1个文字的大小,如果当前元素没有设置大小，则会按照父元素的1个文字大小。

    4.5 行间距

    line-height属性用于设置行间的距离(行高)。可以控制文字行与行之间的距离

     P{
     line-height: 26px;
 }

    5.引入方式

    5.1 CSS的三种样式表

    按照CSS样式书写的位置(者引入的方式)，CSS样式表可以分为三大类

    1. 行内样式表(行内式)

    2. 内部样式表(入式)

    3. 外部样式表(链接式)

    5.2 内部样式表

    内部样式表(内嵌样式表)是写到html页面内部.是将所有的SS代码抽取出来，单独放到一个标签中