【前端】CSS（引入方式+选择器+常用元素属性+盒模型+弹性布局）

04-08 1923阅读 0评论

文章目录

一、什么是CSS
二、语法规范
三、引入方式

1.内部样式表
2.行内样式表
3.外部样式
四、选择器

1.选择器的种类

1.基础选择器：单个选择器构成的

1.标签选择器
2.类选择器
3.id 选择器
4.通配符选择器
2.复合选择器

1.后代选择器
2.子选择器
3.并集选择器
4.伪类选择器
五、常用元素属性

1.字体属性

1.设置字体
2.设置大小
3.设置粗细
4.文字样式
2.文本属性

RBG
1.文本颜色
2.文本对齐
3.文本缩进
4.文本装饰
5.行高
3.背景属性

1.背景颜色
2.背景图片
3.背景平铺
4.背景位置
5.背景尺寸
4.圆角矩形

生成圆形
生成圆角矩形
六、元素的显示模式

1.块级元素
2.行内元素
3.行内元素和块级元素的区别
4.改变显示模式
七、盒模型

1.边框

边框会把盒子撑大
2.内边距
3.外边距
4.块级元素水平居中
5.去除浏览器默认样式
八、弹性布局

1.flex布局的概念
2.常用属性

1.justify-content

2.align-items

CSS

一、什么是CSS

层叠样式表（Cascading Style Sheets）

对元素位置的排版进行精确控制，实现结构和样式的分离

CSS 控制页面的展示效果

HTML决定页面的结构

二、语法规范

选择器+{一条/N条声明}

选择器：要修改谁

声明:具体要修改什么内容。声明的属性是键值对，用分号区分，键和值用：

通常情况下，把style放在head中

    p{
        color: #23b47f;
        /* font-size: 50px; */  
    }

这里注释和html不一样

三、引入方式

1.内部样式表

通过style标签将CSS嵌套到HTML页面中

style 一般放在 head 中

可以让样式和页面结构分离，但是当CSS内容多的时候，分离的不够彻底

    
    
    Document

    p{
        color: #23b47f;
        font-size: 50px;
    }

2.行内样式表

    行内样式表

只针对某个标签生效
适合简易的样式

优先级高，会覆盖掉其他的样式

3.外部样式

创建一个CSS文件

使用Link标签引如CSS

样式和结构彻底分离

受浏览器缓存影响，修改后不一定立即生效

ctrl+f5强制刷新页面

四、选择器

选中页面中要指定的标签元素

先选中才能设置

1.选择器的种类

1.基础选择器：单个选择器构成的

1.标签选择器

p{
    /* 标签选择器 */
    color: red;
    font-size: 40px;
}

2.类选择器

    hello html
    hello Java
    hello Python
    hello eat
.java{
    color:chartreuse;
    font-size: 30px;
}
.html{
    color:blueviolet;
    font-size: 50px;
}
.longurage{
    font-size: 70px;
}
    hello Python

类名用 . 开头的

类选择器可以进行样式的叠加，因此两个类名用空格隔开

3.id 选择器

    前端开发
    后端开发
#fe{
    color:red;
    font-size: 80px;
}
#server{
    color: blue;
    font-size: 120px;
}

同一个页面，id的值为一

id后加#

4.通配符选择器

*选取所有的标签

消除所有元素的默认样式。主要消除边距

* {
    background-color:antiquewhite;
}

2.复合选择器

把多种基础选择器综合运用起来

1.后代选择器

包含选择器，选择父类中的子元素

元素1 元素2 {样式声明}
     ol li{
        color: red;
    }
    ul li{
        color: aqua; 
    }
    .hobby li{
        color: red;
    }

元素 1 和元素 2 要使用空格分割

元素 1 是父级, 元素 2 是子级, 只选元素 2 , 不影响元素 1

元素 2 不一定非是儿子, 也可以是孙子

2.子选择器

.two>a {
    color: red;
}

只能选择亲儿子

使用大于号分割

3.并集选择器

用于选择多组标签. (集体声明)

逗号分割

div, h3 {
    color: red;
}

4.伪类选择器

用来定义元素的状态

1.链接伪类选择器

 a:link 选择未被访问过的链接
a:visited 选择已经被访问过的链接
a:hover 选择鼠标指针悬停上的链接
a:active 选择活动链接(鼠标按下了但是未弹起)
a:link {
    color: black;
    /* 去掉 a 标签的下划线 */
    text-decoration: none;
}
a:visited {
    color: green;
}
a:hover {
    color: red;
}
a:active {
    color: blue;
}

清空浏览器历史记录: ctrl + shift + delete

按照 LVHA 的顺序书写,把 active 拿到前面去, 就会导致 active 失效

2 :force 伪类选择器

选取获取焦点的 input 表单元素.

    
    
    
    
.three>input:focus {
    color: red;
}

被选中的表单的字体就会变成红色

五、常用元素属性

1.字体属性

1.设置字体

font-family

    
           .font-family .one {
               font-family: 'Microsoft YaHei';
          }
           .font-family .two {
               font-family: '宋体';
          }
       
++++++++++++++++++++++++++++++++++++++
    "font-family">
        "one">
            这是微软雅黑
             
        "two">
            这是宋体

2.设置大小

font-size

    p {
        font-size: 100px;
    }

chrome 默认大小是 16px
可以给 body 标签使用 font-size
标题标签需要单独指定大小

实际上它设置的是字体中字符框的高度；实际的字符字形可能比这些框高或矮

3.设置粗细

    .font-family .two {
        font-family: '宋体';
        font-size: 30px;
        font-weight: bold;
    }

700 == bold, 400 是不变粗, == normal

取值范围是 100 ~ 900

4.文字样式

        /* 设置倾斜 */
        font-style: italic;
		/* 取消倾斜 */
        font-style :normal;
    .font-style em {
        font-style: normal;
    }
 "font-style">
           倾斜的
           "one">
            正常的

经常需要把倾斜的改正常

2.文本属性

RBG

R (red), G (green), B (blue) 的方式表示颜色(色光三原色)
每个颜色用一个字节表示
一个字节8个比特位, 表示的范围是 0-255, 十六进制表示为 00-FF

255, 255, 255 表示白色; 0, 0, 0 就表示黑色

1.文本颜色

color: red;
color: #ff0000;
color: rgb(255, 0, 0);

2.文本对齐

控制文字水平方向上的对齐

lorem 生成一长段文字

    h1 {
        text-align: left;
    }
    h2 {
        text-align: center;
    }
    h3 {
        text-align: right;
    }

3.文本缩进

控制段落的首行缩进 (其他行不影响)
单位可以使用 px 或者 em.使用 em 更好,1 个 em 就是当前元素的文字大小.

缩进可以是负的, 表示往左缩进. (会导致文字就冒出)

    p {
        text-indent: 2em;
        /* text-indent: 20px; */
    }

4.文本装饰

underline 下划线. [常用]
none 啥都没有. 可以给 a 标签去掉下划线. 
overline 上划线. [不常用]
line-through 删除线 [不常用]
    p {
        text-indent: 2em;
        /* text-indent: -20px; */
        text-decoration: underline;
    }

   a {
        text-decoration: none;
    }
    "#">不跳转

5.行高

上下文本行之间的基线距离

    p {
        text-indent: 2em;
        /* text-indent: -20px; */
        text-decoration: underline;
        line-height: 30px;
    }

行高 = 上边距 + 下边距 + 字体大小

3.背景属性

1.背景颜色

默认是 transparent (透明) 的. 可以通过设置颜色的方式修改

    body {
        background-color:blanchedalmond;
    }

2.背景图片

比 image 更方便控制位置(图片在盒子中的位置)

    div {
        width: 500px;
        height: 700px;
       
        background-image: url(https://n.sinaimg.cn/spider20240403/541/w889h452/20240403/16f6-1605b48ddfd6cbf9f6f5f4e8e052308f.jpg);
    }

url 上可以加引号, 也可以不加

3.背景平铺

repeat: 平铺
no-repeat: 不平铺
repeat-x: 水平平铺
repeat-y: 垂直平铺

默认是repeat

背景颜色和背景图片可以同时存在. 背景图片在背景颜色的上方

    div {
        width: 700px;
        height: 400px;
        background-image: url(../image/男.png);
        background-repeat: no-repeat;
    }

4.背景位置

    div {
        width: 700px;
        height: 400px;
       
        /* background-image: url(https://n.sinaimg.cn/spider20240403/541/w889h452/20240403/16f6-1605b48ddfd6cbf9f6f5f4e8e052308f.jpg); */
    
        background-image: url(../image/男.png);
        background-repeat: repeat-y;
        background-position: 200px 200px; /*对背景图片的位置进行移动*/
    }

参数的三种风格:

方位名词: (top, left, right, bottom)
精确单位: 坐标或者百分比(以左上角为原点)
混合单位: 同时包含方位名词和精确单位

两个参数都是方位名词, 则前后顺序无关. (top left 和 left top 等效)
只有一个名词，第二个默认居中（left水平居中）
参数是精确值：第一个是x,第二个是y
参数是精确值：只有一个，是x是值，另一个默认居中

混合单位，第一个是x的，第二个为y

计算机中的平面坐标系, 一般是左手坐标系(y轴向下)

5.背景尺寸

		background-size: 700px 400px;
		background-size: 80%;
	
        background-size: cover;
        background-size: contain;

填写具体的值
填百分比
cover: 扩展至足够大,图像完全覆盖背景区域.超出范围（溢出盒子）

contion:扩展至完全适应内容区域的最大尺寸（被盒子框住）

4.圆角矩形

通过 border-radius 使边框带圆角效果

    div {
        width: 400px;
        height: 200px;
        border: 2px green solid; 
        /*solid显示线条  */
        border-radius: 20px;
    
    }

length 是内切圆的半径. 数值越大, 弧线越强烈

生成圆形

让 border-radius 的值为正方形宽度的一半

    div {
        width: 400px;
        height: 400px;
        border: 2px green solid; 
        /*solid显示线条  */
        border-radius: 50%;
    
    }

生成圆角矩形

border-radius 的值为矩形高度的一半

    div {
        width: 400px;
        height: 200px;
        border: 2px green solid; 
        /*solid显示线条  */
        border-radius: 100px;
    
    }

还可以，针对四个角分别设置

border-radius:2em;                             
等价于                                              
border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;
border-radius: 10px 20px 30px 40px;
等价于
border-top-left-radius:10px;
border-top-right-radius:20px;
border-bottom-right-radius:30px;
border-bottom-left-radius:40px;

六、元素的显示模式

1.块级元素

h1 - h6
p
div
ul
ol
li

独占一行
高度, 宽度, 内外边距, 行高都可以控制
和父元素一样宽

是一个容器(盒子), 里面可以放行内和块级元素

    .demo1 .parent {
        width: 500px;
        height: 500px;
        background-color: green;
   }
    .demo1 .child {
        /* 不写 width, 默认和父元素一样宽 */
        /* 不写 height, 默认为 0 (看不到了) */
        height: 200px;
        background-color: red;
   }

"demo1">
    "parent">
        "child">
           child1
        
        "child">
           child2

文字类的元素内不能使用块级元素

p 标签主要用于存放文字, 内部不能放块级元素, 尤其是div

2.行内元素

a
strong
b
em
i
del
s
ins
u
span

不独占一行, 一行可以显示多个
无法设置高度, 宽度, 行高
默认宽度就是本身的内容
行内元素只能容纳文本和其他行内元素, 不能放块级元素

行内元素的宽度和高度会根据其内容进行改变

3.行内元素和块级元素的区别

1.块级元素独占一行, 行内元素不独占一行

2.块级元素可以设置宽高, 行内元素不能设置宽高

3.块级元素四个方向都能设置内外边距, 行内元素垂直方向不能设置.

4.改变显示模式

使用 display 属性可以修改元素的显示模式

可以把 div 等变成行内元素, 也可以把 a , span 等变成块级元素

display: block 改成块级元素 [常用]
display: inline 改成行内元素 [很少用]
display: inline-block 改成行内块元素
    a{
        display: block;
    }
    "#">test1
    "#">test2
        width: 200px;
        height: 100px;
        border-color: black;
        border-style: solid;
        border-width: 10px;
    }
简写： border: black solid 10px;

        width: 200px;
        height: 100px;
        border-color: black;
        border-style: solid;
        border-width: 10px;
        box-sizing: border-box;
    }
* {
    box-sizing: border-box;
}

        border: solid green 5px;
        /* margin-top: 5px;
        margin-bottom: 5px;
        margin-left: 5px;
        margin-right: 5px; */
        /* margin: 5px; */
        margin: 5px 5px 6px 6px;
    }

        border: solid green 5px; 
        width: 200px;
        height: 100px;
        margin: auto;
        /* 居中的是盒子，调整的是外边框 */
        
        text-align: center;
    }

        margin: 0px;
        padding: 0px;
    }

        height: 700px;
        width: 700px;
        background-color: green;
        display: flex;
        /*定义在直接的父级元素上 
        加上后不再是行内元素，大小为自己设置的宽高 */
    }