CSS学习1

1.CSS简介

CSS的主要使用场景是美化网页，布局页面的。CSS是网页的美容师

CSS是层叠样式表的简称，CSS是一种标记语言。

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

2.CSS语法规范

CSS规则由两个部分组成，选择器以及一条或多条声明。

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

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

3. 属性是对指定的对象设置的样式属性

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

5. 每个键值对用 “;” 结尾

   例子：

       <style>
           /* 选择器{样式} */
           /* 给谁改样式{改什么样式} */
           
           p {
               color: red;
               /* 修改文字的像素 */
               font-size: 12px;
           }
       </style>
   

3.CSS代码风格

1.样式格式

用展开式的风格，每个属性放在一行。

2.样式大小写

一般情况下采用小写代码。

3.空格规范

1. 属性值前面，冒号后面，保留一个空格
2. 选择器和大括号中间保留一个空格

4.CSS选择器的作用

选择器就是根据不同需求把不同的标签选择出来。

5.选择器的分类

选择器可分为基础选择器和复合选择器。

选择器参考手册地址：https://www.runoob.com/cssref/css-selectors.html

• 基础选择器是由单个选择器组成的。
• 基础选择器又包括：标签选择器、类选择器、id选择器和通配符选择器

5.1标签选择器

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

语法：

标签名 {
	属性： 属性值；
}

**作用：**标签选择器可以把某一类标签全部选择出来

**优点：**能够快速为页面中同类型的标签统一设置样式

**缺点：**不能差异化设计

5.2类选择器

单独选一个或者某几个标签

语法：

.类名 {
	属性： 属性值；
}

结构需要用class属性来调用class类

注意：

1. 类选择器使用 “.” 进行标识，后面紧跟类名
2. 可以理解为标签有名字
3. 长名称或词组可以使用短横线进行分割
4. 不用使用纯数字和中文等命名

案例：画盒子

    <style>
        .red {
            width: 100px;
            height: 100px;
            /* 北京颜色 */
            background-color: red;
        }
        
        .green {
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>
    <div class="red"></div>
    <div class="green"></div>
    <div class="red"></div>

5.3类选择器----多类名

1. 多类名使用方式

<div class="red font20">
    
</div>

1. 在标签class属性中写多个类名
2. 多个类名之间必须用空格分开
3. 这个标签可以分别具有这些类名的样式

2.多类名的使用场景

1. 可以把一些标签元素相同的样式放到一个类里面
2. 这些标签都可以调用这个公共的类，然后再调用自己独有的类
3. 减少CSS代码量

5.4 id选择器

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

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

语法：

#id名 {
	属性：属性值；
}

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

id选择器和class选择器的区别：

1. 类选择器好比人的名字，一个人可以由多个名字，同时一个名字也可以被多个人使用
2. id选择器好比人的身份证号码，唯一的，不可重复的
3. id选择器和类选择器最大的不同在使用次数上
4. 类选择器在修改样式中用的最多，id选择器一般用于页面唯一性的元素上，经常和JavaScript搭配使用

5.5通配符选择器

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

语法：

* {
	属性：属性值；
}

• 通配符选择器不需要调用，自动就给所有元素使用样式
• 特殊情况下才使用

6.CSS字体属性

6.1 字体系列

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

• 各种字体之间必须使用英文状态下的逗号隔开
• 一般情况下，如果有空格隔开的多个单词组成的字体，加引号
• 尽量使用系统默认自带字体，保证在任何用户浏览器中都能正确显示

6.2 字体大小

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

• px（像素）大小是网页最常用的单位
• 谷歌浏览器默认的文字大小为16px
• 不同的浏览器可以默认显示的字号大小不一致

6.3 字体粗细

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

6.4 文字样式

CSS 使用 font-style 属性值设置文字的样式

6.5 复合属性

语法：

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

• 使用font属性时，必须按照上面语法顺序书写，不能更换顺序，用空格隔开
• 不需要设置的属性可以忽略，但是必须保留 font-size 和 font-family 属性

7.CSS文本属性

7.1 文本颜色

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

7.2 对齐文本

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

7.3 装饰文本

text-decoration属性规定添加到文本的修饰

属性值	描述
none	默认，没有装饰线
underline	下划线，链接a自带下划线
overline	上划线
line-through	删除线

7.4 文本缩进

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

em是一个相对单位，就是当前元素1个文字的大小

7.5 行间距

line-height 属性用于设置行间对的距离，可以控制文字行与行之间的距离

8.CSS 引入方式

8.1 CSS内部样式表

内部样式表是写到HTML页面的内部，是将所有的CSS代码抽取出来，单独放到一个style标签中。

• style标签理论上可以放在HTML文档中的任何地方，但一般会放在文档的head标签中
• 通过此方式，可以方便控制当前整个页面中的元素样式设置
• 代码结构非常清晰，并没有完全分离
• 使用内部样式表设定CSS，通常也被称为嵌入式引入

8.2 CSS行内样式表

行内样式表是在元素标签内部的style属性中设定CSS样式，适合简单修改格式。

• style其实就是标签的属性
• 在双引号中间，写法要复合CSS规范
• 可以控制当前的标签设置样式
• 由于结构繁琐，并不推荐使用

8.3 外部样式表

样式单独写到CSS文件中，之后把CSS文件引入到HTML中使用。

引入外部样式表分为两步：

1. 新建一个后缀名为.css的样式文件，把所有CSS代码都放入此文件中
2. 在HTML页面中，使用link标签引入这个文件

综合案例：

    <style>
        body {
            font: 16px/28px '微软雅黑';
        }
        
        h1 {
            font-weight: 400;
            text-align: center;
        }
        
        .gray {
            color: #888888;
            font-size: 12px;
            text-align: center;
        }
        
        a {
            text-decoration: none;
        }
        
        .search {
            color: #666666;
            width: 170px;
        }
        
        .btn {
            font-weight: 700;
        }
        
        p {
            text-indent: 2em;
        }
        
        .pic {
            text-align: center;
        }
        
        .footer {
            color: #888888;
            font-size: 12px;
        }
    </style>
    <h1>北方高温明日达鼎盛 京津冀多地地表温度将超60℃</h1>
    <div class="gray">2019-07-03 16:31:47 来源: <a href="#">中国天气网</a>　 <input type="text" value="请输入查询条件" class="search"> <button class="btn">搜索</button></div>
    <hr>

    <p>中国天气网讯 今天（3日），华北、黄淮多地出现高温天气，截至下午2点，北京、天津、郑州等地气温突破35℃。预报显示，今后三天（3-5日），这一带的高温天气将继续发酵，高温范围以及强度将在4日达到鼎盛，预计北京、天津、石家庄、济南等地明天的最高气温有望突破38℃，其中北京和石家庄的最高气温还有望创今年以来的新高。</p>

    <h4>气温41.4℃！地温66.5！北京强势迎七月首个高温日</h4>

    <p class="pic">
        <img src="images/pic.jpeg" alt="">
    </p>

    <p>今天，华北、黄淮一带的高温持续发酵，截至今天下午2点，陕西北部、山西西南部、河北南部、北京、天津、山东西部、河南北部最高气温已普遍超过35℃。大城市中，北京、天津、郑州均迎来高温日。</p>

    <p>在阳光暴晒下，地表温度也逐渐走高。今天下午2点，华北黄淮大部地区的地表温度都在50℃以上，部分地区地表温度甚至超过60℃。其中，河北衡水地表温度高达68.3℃，天津站和北京站附近的地表温度分别高达66.6℃和66.5℃。</p>

    <h4>明日热度再升级！京津冀携手冲击38℃+</h4>

    <p>中国天气网气象分析师王伟跃介绍，明天（4日），华北、黄淮地区35℃以上的高温天气还将继续升级，并进入鼎盛阶段，高温强度和范围都将发展到最强。 明天，北京南部、天津大部、河北中部和南部、山东中部和西部、山西南部局地、河南北部、东北部分地区的最高气温都将达到或超过35℃。</p>

    <p>不过，专家提醒，济南被雨水天气完美绕开，因此未来一周，当地的高温还会天天上岗。在此提醒当地居民注意防暑降温，防范持续高温带来的各种不利影响。（文/张慧 数据支持/王伟跃 胡啸 审核/刘文静 张方丽）</p>

    <p class="footer">本文来源：中国天气网 责任编辑：刘京_NO5631</p>