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

文章目录

CSS

一、什么是CSS

  • 层叠样式表(Cascading Style Sheets)
  • 对元素位置的排版进行精确控制,实现结构和样式的分离

CSS 控制页面的展示效果

HTML决定页面的结构

二、语法规范

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

  • 选择器:要修改谁
  • 声明:具体要修改什么内容。声明的属性是键值对,用分号区分,键和值用:

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

css 复制代码
<style>
    p{
        color: #23b47f;
        /* font-size: 50px; */  
    }
</style>

这里注释和html不一样

三、引入方式

1.内部样式表
  • 通过style标签将CSS嵌套到HTML页面中
  • style 一般放在 head 中

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

CSS 复制代码
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<style>
    p{
        color: #23b47f;
        font-size: 50px;
    }
</style>
</head>
2.行内样式表
CSS 复制代码
    <h3 style=" color: blueviolet; font-size: 30px;">行内样式表</h3>
  • 只针对某个标签生效
  • 适合简易的样式
  • 优先级高,会覆盖掉其他的样式
3.外部样式
  • 创建一个CSS文件
  • 使用Link标签引如CSS
css 复制代码
    <link rel="stylesheet" href="./demo02.css">

样式和结构彻底分离

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

  • ctrl+f5强制刷新页面

四、选择器

  • 选中页面中要指定的标签元素
  • 先选中才能设置

1.选择器的种类

1.基础选择器:单个选择器构成的
1.标签选择器
css 复制代码
p{
    /* 标签选择器 */
    color: red;
    font-size: 40px;
}
2.类选择器
css 复制代码
    <p class="html">hello html</p>
    <p class="java">hello Java</p>
    <p class="html">hello Python</p>
    <p class="java">hello eat</p>

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

    <p class="html longurage">hello Python</p>

类名用 . 开头的

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

3.id 选择器
css 复制代码
    <p id="fe">前端开发</p>
    <p id="server">后端开发</p>
#fe{
    color:red;
    font-size: 80px;
}
#server{
    color: blue;
    font-size: 120px;
}
  • 同一个页面,id的值为一
  • id后加#
4.通配符选择器
  • *选取所有的标签
  • 消除所有元素的默认样式。主要消除边距
css 复制代码
* {
    background-color:antiquewhite;
}
2.复合选择器
  • 把多种基础选择器综合运用起来
1.后代选择器

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

css 复制代码
元素1 元素2 {样式声明}
     ol li{
        color: red;
    }

    ul li{
        color: aqua; 
    }
    .hobby li{
        color: red;
    }

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

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

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

2.子选择器
css 复制代码
.two>a {
    color: red;
}
  • 只能选择亲儿子
  • 使用大于号分割
3.并集选择器
  • 用于选择多组标签. (集体声明)
  • 逗号 分割
css 复制代码
div, h3 {
    color: red;
}
4.伪类选择器
  • 用来定义元素的状态

1.链接伪类选择器

css 复制代码
 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 表单元素.
css 复制代码
<div class="three">
    <input type="text">
    <input type="text">
    <input type="text">
    <input type="text">
</div>
.three>input:focus {
    color: red;
}

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

五、常用元素属性

1.字体属性

1.设置字体

font-family

css 复制代码
    <style>
           .font-family .one {
               font-family: 'Microsoft YaHei';
          }
           .font-family .two {
               font-family: '宋体';
          }
       </style>
++++++++++++++++++++++++++++++++++++++
    <div class="font-family">
        <div class="one">
            这是微软雅黑
             </div>
        <div class="two">
            这是宋体
        </div>
    </div>
2.设置大小

font-size

css 复制代码
    p {
        font-size: 100px;
    }
  • chrome 默认大小是 16px
  • 可以给 body 标签使用 font-size
  • 标题标签需要单独指定大小
  • 实际上它设置的是字体中字符框的高度;实际的字符字形可能比这些框高或矮
3.设置粗细
css 复制代码
    .font-family .two {
        font-family: '宋体';
        font-size: 30px;
        font-weight: bold;
    }
  • 700 == bold, 400 是不变粗, == normal
  • 取值范围是 100 ~ 900
4.文字样式
css 复制代码
        /* 设置倾斜 */
        font-style: italic;
		/* 取消倾斜 */
        font-style :normal;
    .font-style em {
        font-style: normal;
    }
 <div class="font-style">
           <em>倾斜的</em>
           <div class="one">
            正常的
            </div>
    </div>
  • 经常需要把倾斜的改正常

2.文本属性

RBG
  • R (red), G (green), B (blue) 的方式表示颜色(色光三原色)
  • 每个颜色用一个字节表示
  • 一个字节8个比特位, 表示的范围是 0-255, 十六进制表示为 00-FF
  • 255, 255, 255 表示白色; 0, 0, 0 就表示黑色
1.文本颜色
css 复制代码
color: red;
color: #ff0000;
color: rgb(255, 0, 0);
2.文本对齐
  • 控制文字水平方向上的对齐

  • lorem 生成一长段文字

css 复制代码
<style>
    h1 {
        text-align: left;
    }
    h2 {
        text-align: center;
    }
    h3 {
        text-align: right;
    }
</style>
3.文本缩进
  • 控制段落的 首行 缩进 (其他行不影响)

  • 单位可以使用 px 或者 em.使用 em 更好,1 个 em 就是当前元素的文字大小.

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

css 复制代码
    p {
        text-indent: 2em;
        /* text-indent: 20px; */
    }
4.文本装饰
css 复制代码
underline 下划线. [常用]
none 啥都没有. 可以给 a 标签去掉下划线. 
overline 上划线. [不常用]
line-through 删除线 [不常用]

    p {
        text-indent: 2em;
        /* text-indent: -20px; */
        text-decoration: underline;
    }
css 复制代码
   a {
        text-decoration: none;
    }
    <a href="#">不跳转</a>
    
5.行高
  • 上下文本行之间的基线距离
css 复制代码
    p {
        text-indent: 2em;
        /* text-indent: -20px; */
        text-decoration: underline;
        line-height: 30px;
    }
  • 行高 = 上边距 + 下边距 + 字体大小

3.背景属性

1.背景颜色
  • 默认是 transparent (透明) 的. 可以通过设置颜色的方式修改
css 复制代码
    body {
        background-color:blanchedalmond;
    }
2.背景图片
  • 比 image 更方便控制位置(图片在盒子中的位置)
css 复制代码
    div {
        width: 500px;
        height: 700px;
       
        background-image: url(https://n.sinaimg.cn/spider20240403/541/w889h452/20240403/16f6-1605b48ddfd6cbf9f6f5f4e8e052308f.jpg);
    }

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

3.背景平铺
css 复制代码
repeat: 平铺
no-repeat: 不平铺
repeat-x: 水平平铺
repeat-y: 垂直平铺

默认是repeat

  • 背景颜色和背景图片可以同时存在. 背景图片在背景颜色的上方
css 复制代码
    div {
        width: 700px;
        height: 400px;
        background-image: url(../image/男.png);
        background-repeat: no-repeat;
    }
4.背景位置
css 复制代码
    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; /*对背景图片的位置进行移动*/
    }

参数的三种风格:

  1. 方位名词: (top, left, right, bottom)
  2. 精确单位: 坐标或者百分比(以左上角为原点)
  3. 混合单位: 同时包含方位名词和精确单位
  • 两个参数都是方位名词, 则前后顺序无关. (top left 和 left top 等效)

  • 只有一个名词,第二个默认居中(left水平居中)

  • 参数是精确值:第一个是x,第二个是y

  • 参数是精确值:只有一个,是x是值,另一个默认居中

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

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

5.背景尺寸
css 复制代码
		background-size: 700px 400px;
		background-size: 80%;
	
        background-size: cover;
        background-size: contain;
  • 填写具体的值
  • 填百分比
  • cover: 扩展至足够大,图像完全覆盖背景区域.超出范围(溢出盒子)
  • contion:扩展至完全适应内容区域的最大尺寸(被盒子框住)

4.圆角矩形

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

css 复制代码
    div {
        width: 400px;
        height: 200px;
        border: 2px green solid; 
        /*solid显示线条  */
        border-radius: 20px;
    
    }
  • length 是内切圆的半径. 数值越大, 弧线越强烈
生成圆形
  • 让 border-radius 的值为正方形宽度的一半
css 复制代码
    div {
        width: 400px;
        height: 400px;
        border: 2px green solid; 
        /*solid显示线条  */
        border-radius: 50%;
    
    }
生成圆角矩形
  • border-radius 的值为矩形高度的一半
css 复制代码
    div {
        width: 400px;
        height: 200px;
        border: 2px green solid; 
        /*solid显示线条  */
        border-radius: 100px;
    
    }
  • 还可以,针对四个角分别设置
css 复制代码
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.块级元素
html 复制代码
h1 - h6
p
div
ul
ol
li
  • 独占一行
  • 高度, 宽度, 内外边距, 行高都可以控制
  • 和父元素一样宽
  • 是一个容器(盒子), 里面可以放行内和块级元素
css 复制代码
<style>
    .demo1 .parent {
        width: 500px;
        height: 500px;
        background-color: green;
   }
    .demo1 .child {
        /* 不写 width, 默认和父元素一样宽 */
        /* 不写 height, 默认为 0 (看不到了) */
        height: 200px;
        background-color: red;
   }
</style>
<div class="demo1">
    <div class="parent">
        <div class="child">
           child1
        </div>
        <div class="child">
           child2
        </div>
    </div>
</div>
  • 文字类的元素内不能使用块级元素

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

2.行内元素
html 复制代码
a
strong
b
em
i
del
s
ins
u
span
  • 不独占一行, 一行可以显示多个
  • 无法设置高度, 宽度, 行高
  • 默认宽度就是本身的内容
  • 行内元素只能容纳文本和其他行内元素, 不能放块级元素
  • 行内元素 的宽度和高度会根据其内容进行改变
3.行内元素和块级元素的区别

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

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

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

4.改变显示模式
  • 使用 display 属性可以修改元素的显示模式
  • 可以把 div 等变成行内元素, 也可以把 a , span 等变成块级元素
css 复制代码
display: block 改成块级元素 [常用]
display: inline 改成行内元素 [很少用]
display: inline-block 改成行内块元素

    a{
        display: block;
    }

    <a href="#">test1</a>
    <a href="#">test2</a

七、盒模型

  • 每一个 HTML 元素就相当于是一个矩形的 "盒子"

    边框 border
    内容 content
    内边距 padding
    外边距 margin

1.边框
css 复制代码
粗细: border-width

样式: border-style, 默认没边框. solid 实线边框 dashed 虚线边框 dotted 点线边框

颜色: border-color
css 复制代码
    div{
        width: 200px;
        height: 100px;
        border-color: black;
        border-style: solid;
        border-width: 10px;
    }

简写: border: black solid 10px;
边框会把盒子撑大
  • 通过 box-sizing 属性可以修改浏览器的行为, 使边框不再撑大盒子
css 复制代码
    div{
        width: 200px;
        height: 100px;
        border-color: black;
        border-style: solid;
        border-width: 10px;
        box-sizing: border-box;
    }
* {
    box-sizing: border-box;
}
2.内边距
  • padding 设置内容和边框之间的距离
  • 默认内容是顶着边框来放置的. 用 padding 来控制这个距离
css 复制代码
        padding-left: 5px;
        padding-top: 5px;
        padding-right: 5px;
        padding-bottom: 5px;

简写: padding: 5px;
还有按照顺时针写四个px
3.外边距
  • 控制盒子和盒子之间的距离
css 复制代码
    div{
        border: solid green 5px;
        /* margin-top: 5px;
        margin-bottom: 5px;
        margin-left: 5px;
        margin-right: 5px; */
        /* margin: 5px; */
        margin: 5px 5px 6px 6px;
    }
4.块级元素水平居中
  • 前提:指定宽度(如果不指定宽度, 默认和父元素一致)

  • 把水平 margin 设为 auto

css 复制代码
    div{
        border: solid green 5px; 
        width: 200px;
        height: 100px;

        margin: auto;
        /* 居中的是盒子,调整的是外边框 */
        
        text-align: center;
    }
css 复制代码
margin-left: auto; margin-right: auto;
margin: auto;
margin: 0 auto;

三种写法都可以

  • 对于垂直居中, 不能使用 "上下 margin 为 auto " 的方式
5.去除浏览器默认样式
css 复制代码
    * {
        margin: 0px;
        padding: 0px;
    }

八、弹性布局

1.flex布局的概念
  • flex 是 flexible box 的缩写(弹性盒子)
  • 任何一个 html 元素, 都可以指定为 display:flex 完成弹性布局
  • 本质是给父盒子添加 display:flex 属性, 来控制子盒子的位置和排列方式
  • 当父元素设置为 display: flex 之后, 子元素的 float, clear, vertical-align 都会失效
css 复制代码
    div {
        height: 700px;
        width: 700px;
        background-color: green;
        display: flex;
        /*定义在直接的父级元素上 
        加上后不再是行内元素,大小为自己设置的宽高 */
    }
  • flex container :被设置display:flex属性的元素
  • flex item: 子元素成为这个容器的成员。可以纵向排列或者横向排列
  • flex direction(主轴):控制排列方向
2.常用属性
1.justify-content
  • 设置主轴上的子元素排列方式
css 复制代码
        justify-content:flex-end;
        /* 项目位于容器的结尾 */
        justify-self: start;
        /* start是默认情况,默认在容器的开头 */

平分剩余空间
        justify-content: space-between;
        /* 项目在行与行直接有间隙 */
        justify-content: space-around;
         /* 在项目的行之前,行之后,行之间留上空间 */
2.align-items
  • 设置侧轴上的元素排列方式
  • align-items 只能针对单行元素来实现. 如果有多行元素, 就需要使用 item-contents
css 复制代码
        align-items: stretch;
        align-items:start;
        align-items:end;
        align-items: center;
        align-items: space-around;
        align-items: space-between;

stretch(拉伸)是 align-content 的默认值

  • 如果子元素没有被显示指定高度,就会填充父元素的高度

点击移步博客主页,欢迎光临~

相关推荐
我要洋人死4 分钟前
导航栏及下拉菜单的实现
前端·css·css3
科技探秘人15 分钟前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人16 分钟前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR21 分钟前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香23 分钟前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q24985969326 分钟前
前端预览word、excel、ppt
前端·word·excel
小华同学ai31 分钟前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
Gavin_91540 分钟前
【JavaScript】模块化开发
前端·javascript·vue.js
懒大王爱吃狼2 小时前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
逐·風6 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#