珈的个人博客

#CSS语法

css简介

1.2CSS-网页的美容师

css是层叠样式表的简称。
有时我们也会称之为CSS样式表或级联样式表。
CSS是也是一种标记语言
CSS主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等），图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。
简单理解：CSS可以美化HTML,让HTML更漂亮，让页面布局更简单。
即结构（HTML）和样式（CSS）

1.3CSS语法规范

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>体验CSS语法规范</title>
    <style>
        /*选择器 {样式}*/
        /* 给谁改样式{
            改什么样式
        } */
        p{
            color:red;
            font-size:12px;  修改了文字大小为12像素

        }
    </style>
</head>  
<body>
    <p>有点意思</p>
</body>
</html>

选择器是用于指定CSS样式的HTML标签，花括号内是对该对象设置的具体样式。
属性和属性值以“键值对”的形式出现
属性是对指定的对象设置的样式属性
属性和属性值之间用英文“：”分开
多个“键值对”之间用英文“；”进行区分。

1.4CSS代码风格

属性值前面，冒号后面，保留一个空格
选择器（标签）和大括号中间保留空格

css基础选择器

2.1CSS选择器的作用

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

h1{ color:red ; font-size:25px; }

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

###2.3标签选择器
语法{
属性名：属性值
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            color:green;
        }
        div {
            color:pink;
        }
    </style>
</head>
<body>
    <p>男生</p>
    <p>男生</p>
    <p>男生</p>
    <div>女生</div>
    <div>女生</div>
    <div>女生</div>
    <div>女生</div>
</body>
</html>

2.4类选择器

如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器。
类选择器在HTML中以class属性表示，在css中，类选择器以一个点“.”号显示。
语法
结构需要用class属性来调用class类的意思

.类名{
属性1：属性值1；
…
}
.red{
color:red;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        .red {
            color:red;
        }
        .div {
            color:pink;
        }
    </style>
</head>
<body>
    <p class="red">男生</p>
    <p class="div">男生</p>
    <p class="red">男生</p>
    <div>女生</div>
    <div>女生</div>
    <div>女生</div>
    <div>女生</div>
</body>
</html>

案列：课堂案列

通过这个案列练习两个地方

类选择器的使用

div就是一个盒子，用来装网页内容的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>利用类选择器画三个盒子</title>
    <style>
        .red {
            width: 100px;
            height: 100px;
            background-color: red;
        }
        .green {
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="red">
        红色
    </div>
    <div class="green">
        绿色
    </div>
    <div class="red">
        红色
    </div>
</body>
</html>

2.4类选择器-多类名

多类名使用方式

1	<div class="red font20">亚瑟</div>

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

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

我们可以给一个标签添加多个类，或者这个标签有多个名字
这个标签就可以分别具有这些类名的样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>利用类选择器画三个盒子</title>
    <style>
        .box{
            width: 150px;
            height: 100px;
            font-size:30px;
        }
        .red {

            background-color: red;
        }
        .green {

            background-color: green;
        }
    </style>
</head>
<body>
    <div class="red box">
        红色
    </div>
    <div class="green box">
        绿色
    </div>
    <div class="red box">
        红色
    </div>
</body>
</html>

2.5id选择器

id选择器可以为特有特定id的HTML元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS中id选择器以“#”来定义。
语法
#id名{
属性1：属性值1；
…
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>利用类选择器画三个盒子</title>
    <style>
        #pink {
            color: pink;
        }
    </style>
</head>
<body>
    <div id="pink">迈克尔·杰克逊</div>
    <div>pink老师</div>
</body>
</html>

注意:id属性只能在每个HTML文档中出现一次.口诀：样式#定义，结构id调用，只能调用一次，别人切勿使用。
id是唯一的，不得重复。

2.6通配符选择器
在CSS中，通配符选择器使用“*”来定义，他表示选取页面中所有元素（标签）。
语法

{
属性1：属性值1；
···
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>利用类选择器画三个盒子</title>
    <style>
        *{
            color:red;
        }
        *这里把 HTML body div span li 等等的所有标签都修改了样式
        通配符选择器不需要调用，自动就给所有的元素使用样式。
    </style>
</head>
<body>
    <div>迈克尔·杰克逊</div>
    <div>pink老师</div>
    <span>我的</span>
    <ul>
        <li>还是我的</li>
    </ul>
</body>
</html>

这里把 HTML body div span li 等等的所有标签都修改了样式
通配符选择器不需要调用，自动就给所有的元素使用样式。

3.CSS字体属性

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

3.1字体系列

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

p {  
    font-family:"微软雅黑“；  
    div{  
        font-family:Arial,"Microsoft Yahei","微软雅黑";}

}

各种字体之间必须使用英文状态下的逗号隔开
一般情况下，如果有空格隔开的多个单词组成的字体，加引号（单引号或者双引号）
尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示
最常见的几个字体:body{font-family:”Microsoft YaHei”,tahoma,arial,”Hiragino Sans GB”;}

3.2字体大小

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

1
2
3

p {
    font-size: 20px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>利用类选择器画三个盒子</title>
    <style>
       p {
        font-size: 20px;
       }
      h2 {
        font-size:20px;
      }
    </style>
</head>
<body>
    <h2>字体大小</h2>
   <p>px大小是我们网页的最常用的单位</p>
   <p>谷歌浏览器默认的文字大小为16px;</p>
</body>
</html>

px大小是我们网页的最常用的单位
谷歌浏览器默认的文字大小为16px;
可以给body指定整个页面文字的大小
标题需要单独制定字体大小