基础选择器+字体文本相关样式基础认知 css引入方式基础选择器字体样式层叠性文本样式文本水平对齐方式文本修饰

基础认知

css样式写在style标签中

style样式虽然可以写在页面的任意地方，但一般写在head标签里面

css引入方式

内嵌式

css写在当前页面的style标签中，在一些小案例中可以使用

html

 <div>
        内嵌式
 </div>

css

div {
        font-size:20px;
        color: red;
        background-color: green;
      }

外链式

css写在单独的css文件中，通过link标签引入，在一些项目中使用

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./外链式.css">
</head>
<body>
    <div>
        外链式
    </div>
</body>
</html>

css

div{
    color: blue;
    background-color:chartreuse;
    width: 50px;
    height: 50px;
}

行内式

css写在当前标签的style属性中，配合js使用

<div style="color:black; width: 50px; height: 50px; background:pink;">
    行内式
</div>

基础选择器

标签选择器

标签名{css属性名:属性值;}

通过标签名找到，找到页面中的所有这类标签，设置样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            color: green;
        }
        p {
            color: blue;
        }
    </style>
</head>
<body>
    <div>标签选择器1</div>
    <div>标签选择器2</div>
    <div>标签选择器3</div>
    <p>段落</p>
</body>
</html>

标签选择器无论嵌套关系有多深，都能找到对应的标签

标签选择器只能选择一类标签,而不是单独某一个

类选择器

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

通过类名，找到页面中所有带有这个类名的标签，设置样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1 {
            color: green;
            background-color: grey;
            width: 100px;
            height: 80px;
        }
        .box2 {
            
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div class="box1 box2">
        段落1
    </div>
    <div class="box2">
        段落2
    </div>
</body>
</html>

类名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头

一个标签可以同时有多个类名，类名之间以空格隔开

类名可以重复，一个类选择器可以同时选中多个标签

id选择器

#id属性值{css属性名:属性值;}

通过id属性值，找到页面中带有这个id属性值的标签，设置样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            color: red;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div id="box">
        id选择器
    </div>
</body>
</html>

id选择器后期搭配js获取元素的唯一性

一个标签只能有一个id属性值

一个id选择器只能选中一个标签

通配符选择器

*{ css属性名:属性值; }

找到页面中所有的标签，设置样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            font-size: 20px;
            color: purple;
        }
    </style>
</head>
<body>
    <div>通配符选择器</div>
    <span>通配符选择器</span>
    <p>通配符选择器</p>
</body>
</html>

*默认选中html页面所有标签，大多只用于清除浏览器的内外边距

字体样式

字体粗细

font-weight

关键字：

正常	normal
加粗	bold

纯数字：100~900的整百数

正常	400
加粗	700

字体粗细使用数值的时候不加单位

实际开发中推荐使用数值加粗

字体样式

font-style

正常（默认值）	normal
倾斜	italic

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        span{
            font-style: italic;
        }
        em{
            font-style: normal;
        }
        i{
            font-style: normal;
        }
    </style>
</head>
<body>
    <span>上课时候的我</span>
    <hr>
    <em>下课时候的我脉动回来</em>
    <hr>
    <i>下课时候的我脉动回来</i>
</body>
</html>

常见字体系列

无衬线字体

例如：黑体、Arial

网页中大多采用无衬线字体

衬线字体

例如：宋体、Time New Roman

报刊书籍中应用广泛

等宽字体

例如：Consolas、fira code

一般用于程序代码编写，有利于代码的阅读和编写

字体系列

font-family

font-family:{微软雅黑、黑体、宋体、楷体}

从左往右按照顺序查找，如果电脑中未安装该字体，则显示下一个字体

如果都不支持，此时会根据操作系统，显示最后字体系列的默认字体

层叠性

给同一个标签设置了相同的属性，此时样式会层叠（覆盖），写在最下面的会生效

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            color: red;
        }
        div {
            color: green;
        }
    </style>
</head>
<body>
    <div>
        层叠性
    </div>
</body>
</html>

字体简写

font：style weight size family;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div { 
            font: italic 700 20px '宋体';
        }
    </style>
</head>
<body>
    <div>
        字体简写
    </div>
</body>
</html>

字体连写必须严格遵循swsf顺序，各个属性值之间使用空格隔开，字体样式、字体粗细可以省略，但是必须保留字体大小、字体系列，字体连写不能随意颠倒顺序

文本样式

文本缩进

text-indent

一种是用数字+px，把数字设置成当前网页字体大小的二倍就可以实现首行缩进两个字符；另一种是用数字+em，1em=当前标签的font-size的大小。推荐使用第二种，不管网页内的字体大小为多少设置text-indent=2em都可以实现首行缩进两个字符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
            text-indent: 2em;
        }       
    </style>
</head>
<body>
    <p>新传，指的是新闻传播类学科，除了主要的新闻学、传播学外，还包含广告学、广播电视学等专业。</p>
</body>
</html>

文本水平对齐方式

text-aligin

属性值	效果
left	左对齐
center	居中对齐
right	右对齐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: pink;
            text-align: center;
        }
        span{
            /* 无效 */
            text-align: center;
        }
        a{
            /* 无效 */
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="box">
        <span>文本水平居中</span>
        <br>
        <a>文本水平居中</a>
    </div>
</body>
</html>

如果需要让文本水平居中，text-align属性给文本所在标签（文本的父元素）设置

文本修饰属性

text-decoration

属性值	效果
underline	下划线（常用）
line-throuth	删除线（不常用）
overline	上划线（几乎不用）
none	无装饰线（常用）

开发中会使用text-decoration：none；清除a标签默认的下划线

单行文本垂直居中

行高：line-height

让单行文本垂直居中可以设置行高=文字父元素高度

网页精准布时会设置 line-height：1 可以取消上下间距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 300px;
            height: 50px;
            background-color: pink;
            line-height: 50px;
        }
    </style>
</head>
<body>
    <div class="box">
        单行文本垂直居中
    </div>
</body>
</html>

行高等于盒子的高度文字可以垂直居中行高小于盒子的高度文字偏上行高大于盒子的高度文字偏下

盒子水平居中

如果需要让div、p、h（大盒子）水平居中可以通过margin : 0 auto ; 实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 300px;
            height: 200px;
            background-color: pink;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div class="box">
        盒子水平居中
    </div>
</body>
</html>

margin：0 auto 一般针对于固定宽度的盒子，如果大盒子没有设置宽度，此时会默认占满父元素的宽度

颜色取值

关键词
rgb表示法

每项取值范围：0~255

rgb ( 255 , 0 , 0 ) ：红色

rgb ( 0 , 255 , 0 ) ：绿色

rgb ( 0 , 0 , 255 ) ：蓝色

rgb ( 0 , 0 , 0 ) ：黑色

rgb ( 255 , 255 , 255 ) ：白色

……
rgba表示法

a表示透明度取值0-1之间 0表示完全透明 1表示完全不透明

rgba ( 0 , 0 , 0 , 0.5 ) 可以省略写成 rgba ( 0 , 0 , 0 , .5 )

十六进制表示法

如果三组中，每组数字都相同，此时可以每组可以省略只写一个数字

正确写法：#ffaabb 改写成 #fab

#ffaabc 不能改写成 #fabc

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1 {
            /* 1. 关键词 */
            background-color: pink;
        }

        .box2 {
            /* 2. rgb */
            background-color: rgb(0, 255, 255);
        }

        .box3 {
            /* 3. rgba */
            background-color: rgba(0, 0, 0, 0.3);
        }

        .box4 {
            /* 4. 十六进制 */
            background-color: #ff0000;
        }
    </style>
</head>
<body>
    <div class="box1">关键字</div>
    <div class="box2">rgba</div>
    <div class="box3">rgba</div>
    <div class="box4">十六进制</div>
</body>
</html>