菜单 搜索
首页 前端知识 【前端】CSS（引入方式 选择器 常用元素属性 盒模型 弹性布局）

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

2024-07-08 09:07:05 前端知识 前端哥 298 593 我要收藏

文章目录

  • CSS
    • 一、什么是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中

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

这里注释和html不一样

三、引入方式

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

可以让样式和页面结构分离，但是当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.行内样式表
    <h3 style=" color: blueviolet; font-size: 30px;">行内样式表</h3>
复制
  • 只针对某个标签生效
  • 适合简易的样式
  • 优先级高，会覆盖掉其他的样式
3.外部样式
  • 创建一个CSS文件
  • 使用Link标签引如CSS
    <link rel="stylesheet" href="./demo02.css">
复制

样式和结构彻底分离

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

  • ctrl+f5强制刷新页面

四、选择器

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

1.选择器的种类

1.基础选择器：单个选择器构成的
1.标签选择器
p{
    /* 标签选择器 */
    color: red;
    font-size: 40px;
}
复制
2.类选择器
    <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 选择器
    <p id="fe">前端开发</p>
    <p id="server">后端开发</p>
#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 表单元素.
<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

    <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

    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;
    }
 <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.文本颜色
color: red;
color: #ff0000;
color: rgb(255, 0, 0);
复制
2.文本对齐

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

  • lorem 生成一长段文字

<style>
    h1 {
        text-align: left;
    }
    h2 {
        text-align: center;
    }
    h3 {
        text-align: right;
    }
</style>
复制
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;
    }
    <a href="#">不跳转</a>
    
复制
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; /*对背景图片的位置进行移动*/
    }
复制

参数的三种风格:

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

  • 两个参数都是方位名词, 则前后顺序无关. (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
复制
  • 独占一行
  • 高度, 宽度, 内外边距, 行高都可以控制
  • 和父元素一样宽
  • 是一个容器(盒子), 里面可以放行内和块级元素
<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.行内元素
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;
    }
 
    <a href="#">test1</a>
    <a href="#">test2</a
复制

七、盒模型

  • 每一个 HTML 元素就相当于是一个矩形的 “盒子”
边框 border
内容 content
内边距 padding
外边距 margin
复制
1.边框
粗细: border-width
 
样式: border-style, 默认没边框. solid 实线边框 dashed 虚线边框 dotted 点线边框
 
颜色: border-color
复制
    div{
        width: 200px;
        height: 100px;
        border-color: black;
        border-style: solid;
        border-width: 10px;
    }
 
简写： border: black solid 10px;
复制
边框会把盒子撑大
  • 通过 box-sizing 属性可以修改浏览器的行为, 使边框不再撑大盒子
    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 来控制这个距离
        padding-left: 5px;
        padding-top: 5px;
        padding-right: 5px;
        padding-bottom: 5px;
 
简写： padding: 5px;
还有按照顺时针写四个px
复制
3.外边距
  • 控制盒子和盒子之间的距离
    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

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

三种写法都可以

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

八、弹性布局

1.flex布局的概念
  • flex 是 flexible box 的缩写（弹性盒子）
  • 任何一个 html 元素, 都可以指定为 display:flex 完成弹性布局
  • 本质是给父盒子添加 display:flex 属性, 来控制子盒子的位置和排列方式
  • 当父元素设置为 display: flex 之后, 子元素的 float, clear, vertical-align 都会失效
    div {
        height: 700px;
        width: 700px;
        background-color: green;
        display: flex;
        /*定义在直接的父级元素上 
        加上后不再是行内元素，大小为自己设置的宽高 */
    }
复制
  • flex container :被设置display:flex属性的元素
  • flex item: 子元素成为这个容器的成员。可以纵向排列或者横向排列
  • flex direction(主轴)：控制排列方向
2.常用属性
1.justify-content
  • 设置主轴上的子元素排列方式
        justify-content:flex-end;
        /* 项目位于容器的结尾 */
        justify-self: start;
        /* start是默认情况，默认在容器的开头 */
 
平分剩余空间
        justify-content: space-between;
        /* 项目在行与行直接有间隙 */
        justify-content: space-around;
         /* 在项目的行之前，行之后，行之间留上空间 */
复制
2.align-items
  • 设置侧轴上的元素排列方式
  • align-items 只能针对单行元素来实现. 如果有多行元素, 就需要使用 item-contents
        align-items: stretch;
        align-items:start;
        align-items:end;
        align-items: center;
        align-items: space-around;
        align-items: space-between;
复制

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

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

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

偷cyk的图

转载请注明出处或者链接地址：https://www.qianduange.cn//article/13851.html
标签
css选择器css 弹性布局css盒模型元素属性
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

广告位招租：QQ85750956
发布的文章

运行npm error code ENOENTnpm error syscall opennpm error path C:\Users\ultra\Desktop\Vue-Project\pac

2024-08-27 09:08:17

前端提高篇（102）：jQuery高级方法callbacks、deferred

2024-05-09 11:05:34

解决npm install 报错 “npm err code 1“

2024-06-06 10:06:47

【常见错误】npm ERR! code CERT_HAS_EXPIRED & errno CERT_HAS_EXPIRED

2024-04-22 09:04:34

vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack

2024-03-29 15:03:20

npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.

2024-04-20 17:04:38

JQuery中的load()、$

2024-05-10 08:05:15

《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML CSS JavaScript (1)

2024-10-30 21:10:12

基于Java SpringBoot Vue HTML5药店管理系统(源码 LW 调试文档 讲解等)/药店管理软件/药店进销存系统/药店库存管理系统/药店销售系统/药品管理系统/药店收银系统

2024-11-10 09:11:04

基于Java SpringBoot Vue HTML5宠物健康顾问系统(源码 LW 调试文档 讲解等)/宠物健康/顾问系统/宠物护理/宠物医疗/宠物保健/宠物咨询/宠物医生/宠物健康管理/宠物健康服务

2024-11-10 09:11:50

广告位招租：QQ85750956
大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

CSS常用属性（文本属性）

2024-11-04 09:11:111000
3

TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000
4

CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000
5

vue使用datav echarts

2024-09-06 00:09:381000
6

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
7

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
8

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
9

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000
10

npm的使用

2024-08-18 00:08:131000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！