文本相关属性

字体相关

字体大小:font-size
取值:数字+px
字体粗细:font-weight
正常:normal 或者 400
加粗:bold 或者 700
字体样式:font-style
正常:normal
倾斜:italic
字体系列:font-family
宋体,仿宋,微软雅黑,隶书….

字体连写
font: font-style font-weight font-size font-family (swsf 稍微舒服)

 <style>
        div{
            font-size: 30px;
            font-weight: 700;
            font-style: italic;
            font-family: 隶书;
        }
        p{
            /* font:italic 700 30px 隶书;*/  /* 连写 */
            font: 30px 隶书;   /* 可以省略:但是只能省略前两个,如果省略取值就相当取默认值*/
        }
    </style>

文本样式相关

文本颜色
color
文本水平对齐
text-align (写在父元素上)
文本装饰线
text-decoration none(无)
文本首行缩进
text-indent

<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;
            /* 文本水平对齐方式  left 居左(默认) center: 居中 right: 居右 */
            text-align: center;/*含义:让他里面的元素居中,所以一般写在父标签里面 */
            /* 下划线 none:无  underline:下划线 overline: 上划线 line-through :删除线 */
            text-decoration:none;
        }
        a{
            /* 一般用于去掉a标签的下划线 */
            text-decoration:none;
        }
    </style>
</head>
<body>
    <div>中国移动</div>
    <div>
        <a href="#">百度一下</a><!-- 默认带了下划线 -->
    </div>
</body>

文本相关属性细节

行级或者块级元素的水平居中

1.对于行级元素:水平居中,可以使用text-align:center.这个属性需要写在父元素上
2,对于块级元素(div p),水平居中,一般使用 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>
        body{
            text-align: center;
        }
        div{
            width: 100px;
            height: 100px;
            background: red;
            margin: 0 auto;/* 左右外间距平分 */
        }
    </style>
</head>
<body>
    <!-- 1.对于行级元素:水平居中,可以使用text-align:center.这个属性需要写在父元素上 -->
    <a href="#">百度</a>
    <!-- 2,对于块级元素(div p),水平居中,一般使用 margin:0 auto 这个属性,这个属性写在当前元素上 -->
    <div></div>
</body>
</html>

line-height行高

作用
控制一行的上下间距(行间距)
属性名
line-height
取值
数字+px
应用
1,可以让单行文本垂直居中显示(设置 line-height=文字父元素的高度)
2,在网页精准布局的时候,设置line-height:1,可以取消默认行间距
注意
行高和font连写的时候,注意覆盖问题
font:font-style font-weight font-size/line-height font-family

<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{
            width: 100px;
            height: 100px;
            background: pink;
            text-align: center;/* 水平居中 */
            line-height: 100px;/* 让行高=元素高度,就可以垂直居中 */
        }
        p{
            /*text-indent:首行缩进 1em=当前标签的font-size的大 */
            text-indent: 2em;
            line-height: 20px;/* 控制行间距 */
        }
    </style>
</head>
<body>
    <div>中国移动</div>
    <!-- p>lorem50  自动换行的快捷键是alt+z-->
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Corporis, repudiandae. Eligendi repellat exercitationem quo quis aperiam quos provident dolor unde voluptatum, rem veniam ad alias, earum aut harum voluptate ducimus ratione. Blanditiis obcaecati dolor beatae ex atque, dolorem, voluptatem est, itaque reiciendis corporis similique iure facilis repellat minima quos dicta.</p>
</body>

行高细节问题

<style>
        div{
            width: 200px;
            height: 200px;
            background:pink;
            /* 1,在网页精准布局的时候,会设置行高为1.来取消上下默认间距 */
            /* line-height: 1; */
            /* 2,先设置行高,在设置字体,就会出现问题 
                font: font-style font-weight font-size/line-height  font-family (swsf 稍微舒服)
                因为font-size属性后面还有一个line-height,如果没有设置,行高会被默认行高覆盖
            */
            /* line-height: 200px;
            font:normal 700 30px 宋体; */
            /* 解决方式一: 把设置行高的放在字体的右边 */
            /* font:normal 700 30px/200px 宋体; */
            /* 解决方式二:把设置行高放在下面 */
            font:normal 700 30px 宋体;
            line-height: 200px;
        }
    </style>
</head>
<body>
    <div>中国移动</div>
</body>

背景相关属性

background其他属性

1,背景颜色
background-color 或者 background
2,背景图片
background-image 或者 background
3,背景平铺
background-repeat
4,背景位置
background-position

连写
background:background-color background-image background-repeat background-position

 <style>
        div{
            width: 400px;
            height: 400px;
            /* 背景颜色 */
            background-color: pink;
            /* background: pink; */
            /* 背景图片 */
            background-image: url(./img/1.jpg);
           /*  background: url(./img/1.jpg); */
            /* 背景平铺 repeat:平铺 no-repeat:不平铺 repeat-x:x轴平铺 repeat-y:y轴平铺 */
            background-repeat: no-repeat;/* 默认是平铺 */
            /* 背景位置  第一个参数是水平方向的位置 第二个参数是垂直方向的位置 */
            /* background-position: 50px 50px; */
            /* background-position: center center; */ /* 居中 */
            background-position: 50% 50%;  /* 居中 */
        }
        p{
            width: 400px;
            height: 400px;
            background: skyblue url(./img/1.jpg) no-repeat center center;
        }
    </style>
</head>
<body>
    <div></div>
    <p></p>
</body>

颜色取值了解

方式一:关键字
方式二:rgb
方式三:rgba
方式四:#16进制

<style>
        div{
            /* 方式一:关键字 */
            color: red;
            /* 方式二:rgb */
            color: rgb(255,255,255);
            color: rgb(0,0,0);
            /* 方式三:rgba */
            color: rgb(0,0,0,.5);
            /* 方式三:16进制 */
            color: #ffffff;
            color: #fff;
            color: #000000;
            color: #000;
        }
    </style>
</head>
<body>
    <div>中国移动</div>
</body>

_img和background-image区别

<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>
</head>
<body>
    <!-- img是一个标签,设置了图片之后,有默认的宽高 图片可以撑开img标签 -->
    <img src="./img/1.jpg" alt="">
    <!-- 使用div+背景图片 背景图片仅仅起到装饰效果,如果div没有设置高度,无法显示出来,因为背景图片不能撑开div标签 -->
    <div style="background: url(./img/1.jpg);"></div>
</body>

精灵图应用

Ø 场景：项目中将多张小图片，合并成一张大图片，这张大图片称之为精灵图
Ø 优点：减少服务器发送次数，减轻服务器的压力，提高页面加载速度

使用步骤
1. 创建一个盒子
2. 设置盒子大小为小图片大小
3. 设置精灵图为盒子的背景图片
4. 将小图片左上角坐标取负值，设置给盒子的background-position：x y

  <style>
        div{
            width: 40px;
            height: 40px;
            background: url(./img/icon.png) -81px 3px;/* 后面两个是用来调节图片的位置,用于显示不同的图标 */
        }
    </style>

CSS三大特性

层叠性

后写的样式会覆盖先写的样式(相同样式会覆盖,不同的样式就会叠加)

<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: blue;
        }
        div{
            color: red;
        }
    </style>
</head>
<body>
    <div>中国移动</div>
</body>

继承性

子元素会继承父元素文本相关的属性,可以在一定程度上减少代码

应用场景
1,直接给ul设置 list-style: none 就可以去掉无序列表中的小圆点
2,统一浏览器默认文字的大小,直接给body标签设置统一的font-size

<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-
            - text-
            - line-
            - color */
        .father{
            font: 30px 宋体;
            text-decoration: underline;
            line-height: 100px;
            color: red;
        }
    </style>
</head>
<body>
    <div class="father">
        父亲
        <div class="son"></div>
        儿子
    </div>
</body>

应用:

<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>
        /* 直接给ul设置 list-style: none 就可以去掉无序列表中的小圆点*/
        ul{
            list-style: none;
        }
        /* 统一浏览器默认文字的大小,直接给body标签设置统一的font-size */
        body{
            font-size: 20px;
        }
    </style>
</head>
<body>
    <ul>
        <li>我是li元素</li>
        <li>我是li元素</li>
        <li>我是li元素</li>
        <li>我是li元素</li>
        <li>我是li元素</li>
        <li>我是li元素</li>
        <li>我是li元素</li>
        <li>我是li元素</li>
        <li>我是li元素</li>
        <li>我是li元素</li>
    </ul>

优先级

特点:
不同的选择器具有不同的优先级,优先级高的选择器样式会覆盖优先级低的选择器样式
公式:
继承<元素选择器<类选择器注意点:
1,!important 写在属性值的后面,分号的前面
2,!important 不能提升继承的优先级,只要是继承,优先级最低
3,实际开发中不建议使用!important

<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>
        a{
            color: red;/* 0,0,0,1 */
        }
        li a{
            color: green;/* 0,0,0,2 */
        }
        .mylink{
            color: yellow;/* 0,0,1,0 */
        }
        #myli a{
            color: blue;/* 0,1,0,1 */
        }
    </style>
</head>
<body>
    <div id="mydiv">
        <ul id="myul">
            <li id="myli">
                <a href="#" class="mylink">中国移动</a>
            </li>
        </ul>
    </div>
</body>

<head>
    <meta charset="utf-8">
    <title>第1题：普通题</title>
    <style>
        #father #son {
            color:blue; /* 2,0,0 */
        } 
        #father p.c2 { 
            color:black;/* 1,1,1 */
        } 
        div.c1 p.c2 {
            color:red;/*0,2,2 */
        } 
        #father { 
            color:green !important;/*1,0,0 */  /* 因为!important属性被继承了 */
        } 
        div#father.c1 {
            color: yellow ;/* 1,1,1 */
        } 
    </style>
</head>
<body>
    <div id="father" class="c1">
        <p id="son" class="c2">
            这行文本是什么颜色的？ 
        </p>
    </div>
</body>

盒子模型

行盒和块盒分类

万物皆盒子,行级元素对应的是行盒,块级元素对应的是块盒

块盒: 独占一行, 可以设置宽高
如果不设置宽度,默认和父盒子一样宽
如果不设置高度,默认是由内容撑开的
display属性的值默认是block

- 行盒: 不独占一行, 高度由字体大小撑开
设置宽高没有效果,宽高是由内容撑大的
display属性的值默认是inline

互转
行级元素->块级元素 display: block;
行级元素->行内块元素 display: inline-block; 可以设置宽高,也可以在一行显示 ```html <!—
```
  万物皆盒子,行级元素对应的是行盒,块级元素对应的是块盒
   - 块盒: 独占一行, 可以设置宽高
      如果不设置宽度,默认和父盒子一样宽
      如果不设置高度,默认是由内容撑开的
```

     - 行盒: 不独占一行, 高度由字体大小撑开
        设置宽高没有效果,宽高是由内容撑大的
-->
<h1>中国移动</h1>
<p>中国联通</p>
<div>中国电信</div>
<span>俄罗斯</span>
<a>乌克兰:欧洲的子宫</a>

<a name="YrK5c"></a>
## 行盒和块盒的相互转换
```html
<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>
        a{
            width:200px;
            height: 200px;
            background: pink;
            /* 转成块元素*/
            /* display: block; */
            /* 转成行内块元素 : 可以设置宽高,也可以在一行显示 */
            display: inline-block;
        }
    </style>
</head>
<body>
    <a href="#">我是一条酸菜鱼</a>
    <a href="#">我是一条酸菜鱼</a>
    <a href="#">我是一条酸菜鱼</a>
</body>

盒子元素的组成

边框;border
内边距:padding
外边距:margin

<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{
            width: 100px;
            height: 100px;
            background: pink;
            margin: 10px;/* 外边距 */
            padding: 10px;/* 内边距*/
            border:1px solid green;/* 组成 */
        }
    </style>
</head>
<body>
    <div>1</div>
    <div>2</div>
</body>

盒子的边框详解

border-width 边框宽度
border-style 边框样式
border-color 边框颜色

连写
border: 2px solid red;

<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{
            width: 300px;
            height: 300px;
            /* background: pink; */
            /* 1,单个属性 */
            /* 边框宽度 */
            border-width: 5px;/* 设置的是上下左右的边框宽度 */
            /* 边框样式:
                - none：没有边框即忽略所有边框的宽度（默认值）
                - solid：边框为单实线(最为常用的)
                - dashed：边框为虚线 
                - dotted：边框为点线
            */
            border-style: dashed;
            /* 边框颜色 */
            border-color: green;
            /* 2,连写形式 */
            border: 2px solid red;
            /* 3,单方向的设置 */
            border-bottom: 10px dashed pink;
            /* 4,边框圆角 */
            /* border-radius: 50px; */
            border-radius: 50%;/* 圆形 */
        }
        p{
            width: 300px;
            height: 300px;
            background-color: pink;
            border-width: 5px 10px 15px 20px;/* 上右下左 顺时针方向 */
            border-style: solid;/* 这个其实也是设置的4个边框的样式 */
            border-radius: 0px 0px 50px 50px;/* 上右下左 顺时针方向 */
            border-radius:  0px 50px;/* 只写2个值 上下是0px 左右是50px */
        }
    </style>
</head>
<body>
    <div></div>
    <p></p>
</body>

浏览器调试技巧

1,打开方式
右键 -> 检查
2,选择元素
两种方式
3,控制样式
修改
添加
勾选左边方框
4,特殊情况
出现删除线
出现小三角

Web前端

CSS 相关属性