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

文章目录

  • 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.去除浏览器默认样式

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;}

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

偷cyk的图

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.xdnf.cn/news/1323516.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

python基于django协同算法的个性化音乐推荐系统的设计与实现

本个性化音乐推荐系统以Django作为框架&#xff0c;b/s模式以及MySql作为后台运行的数据库。本系统主要包括以下功能模块&#xff1a;首页&#xff0c;个人中心&#xff0c;用户管理&#xff0c;歌曲类型管理&#xff0c;明星歌手管理&#xff0c;歌曲音乐管理&#xff0c;歌曲…

Java基于微信小程序的电子竞技信息交流系统,附源码(V2.0)

博主介绍&#xff1a;✌IT徐师兄、7年大厂程序员经历。全网粉丝15W、csdn博客专家、掘金/华为云//InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;&#x1f3…

AI预测福彩3D第24弹【2024年4月2日预测--第6套算法开始计算第1次测试】

今天&#xff0c;咱们进行第6套算法测试&#xff0c;本套算法将结合012路直选共27种组合&#xff0c;同时考虑了对012路的和值进行统计分析。今天为第1次测试&#xff0c;好了&#xff0c;废话不多说了。直接上结果~ 仍旧是分为两个方案&#xff0c;1大1小。 经过人工神经网络计…

常用的限流方案思路和实现

限流方案 1、计数器&#xff08;固定窗口&#xff09; 1.1、简介 计数器固定窗口算法是最基础也是最简单的一种限流算法。原理就是对一段固定时间窗口内的请求进行计数&#xff0c;如果请求数超过了阈值&#xff0c;则舍弃该请求&#xff1b;如果没有达到设定的阈值&#xf…

【单点登录SSO,Auth2,jwt-过程分析】

目录 单点登录简介 SSO&CAS是什么 单点登录适合什么场景 单点登录的三种实现方式 CAS的几个重要知识点 CAS的实现过程 单点登录简介 单点登录(SingleSignOn&#xff0c;SSO)&#xff0c;就是通过用户的一次性鉴别登录。当用户在身份认证服务器上登录一次以后&#xff0c;即…

C++ //练习 11.12 编写程序,读入string和int的序列,将每个string和int存入一个pair中,pair保存在一个vector中。

C Primer&#xff08;第5版&#xff09; 练习 11.12 练习 11.12 编写程序&#xff0c;读入string和int的序列&#xff0c;将每个string和int存入一个pair中&#xff0c;pair保存在一个vector中。 环境&#xff1a;Linux Ubuntu&#xff08;云服务器&#xff09; 工具&#x…

【JavaWeb】Day32.MySQL概述

什么是数据库 数据库&#xff1a;英文为 DataBase&#xff0c;简称DB&#xff0c;它是存储和管理数据的仓库。 像我们日常访问的电商网站京东&#xff0c;企业内部的管理系统OA、ERP、CRM这类的系统&#xff0c;以及大家每天都会刷的头条、抖音类的app&#xff0c;那这些大家所…

苍穹外卖Day04套餐管理部分总结

写给像我一样完完全全的小白的。本人代码水平一塌糊涂&#xff0c;前几天就是机械地跟着视频敲代码。对于Day04的作业本来感觉代码抓瞎一点不会写&#xff0c;尽力去理解业务逻辑后发现好像也没那么难&#xff0c;整体代码可以仿照Day03新增菜品来进行实现&#xff01; 一、功…

面试复盘1 - 测试相关(实习)

写在前&#xff1a;hello&#xff0c;大家早中晚上好~这里是西西&#xff0c;最近有在准备测试相关的面试&#xff0c;特此开设了新的篇章&#xff0c;针对于面试中的问题来做一下复盘&#xff0c;会把我自己遇到的问题进行整理&#xff0c;除此之外还会进行对一些常见面试题的…

6.S081的Lab学习——Lab2: system calls

文章目录 前言一、System call tracing&#xff08;moderate&#xff09;解析&#xff1a; 二、Sysinfo&#xff08;moderate&#xff09;解析&#xff1a; 前言 一个本硕双非的小菜鸡&#xff0c;备战24年秋招。打算尝试6.S081&#xff0c;将它的Lab逐一实现&#xff0c;并记…

人工智能上手 Pytorch

人工智能上手 Pytorch 1、人工智能框架历史走向 2015年&#xff0c; caffe&#xff0c;优势配置简单&#xff0c;缺点安装麻烦&#xff0c;且不更新维护 2016年&#xff0c;tensorflow 1.x&#xff0c;定义太严格&#xff0c;很复杂。开发成本高。简单的任务&#xff0c;也很…

今客CRM客户管理系统 v17.3

简介&#xff1a; 今客CRM客户管理系统主要是为了帮助企业解决在日常工作中遇到的客户管理等难题而开发&#xff0c;通过今客CRM客户管理系统可以对企业事务中的不同功能进行操作&#xff0c;用户通过自定义字段类型可以达到适合不同企业的需求。在今客客户关系管理系统中管理…

来个自定义的电子木鱼吧

<!DOCTYPE html> <html><head><meta charset"utf-8"><meta name"viewport" content"widthdevice-width, initial-scale1"><title>自定义木鱼</title> </head> <body style"background-…

Rredis缓存常见面试题

文章目录 1.什么是缓存穿透&#xff0c;怎么解决2.什么是缓存击穿&#xff0c;怎么解决3.什么是缓存雪崩&#xff0c;怎么解决4.双写一致性问题5.redisson添加的排他锁是如何保证读写、读读互斥的6.为什么不使用延迟双删7.redis做为缓存&#xff0c;数据的持久化是怎么做的8.re…

MVCC详细总结

简介 MVCC&#xff08;Multi-Version Concurrency Control&#xff09;是一种多版本并发控制机制&#xff0c;主要用于数据库管理系统中&#xff0c;实现对数据库的并发访问。在编程语言中&#xff0c;MVCC可以实现事务内存。 MVCC的特点是读不加锁&#xff0c;读写不冲突。MVC…

LeetCode 第二题:冒泡排序详解 【2/1000】含imagemagick动态效果图

&#x1f464;作者介绍&#xff1a;10年大厂数据\经营分析经验&#xff0c;现任大厂数据部门负责人。 会一些的技术&#xff1a;数据分析、算法、SQL、大数据相关、python 作者专栏每日更新&#xff1a; LeetCode解锁1000题: 打怪升级之旅 LeetCode解锁1000题: 打怪升级之旅htt…

【重学C语言】三、C语言最简单的程序

【重学C语言】三、C语言最简单的程序 最简单的程序头文件使用尖括号 < >使用双引号 ""区别与注意事项示例 主函数认识三个错误 常量和变量常量ASCII 码表转义字符 关键字数据类型关键字存储类关键字修饰符关键字控制流程关键字函数相关关键字其他关键字 变量变…

公众号爆文策略与实践:揭秘千万阅读量的秘密

1. 引言 介绍公众号爆文的重要性&#xff0c;以及分享个人通过每天投入半小时赚到30倍门票的经验。强调跟上大佬步伐&#xff0c;提升认知的重要性。 2. 爆文的底层逻辑 2.1 推荐的底层逻辑 内容分发机制的变化&#xff0c;从仅限于直接关注到通过搜索、浏览推荐等多种方式…

【Qt】Ubuntu20.04.6+Qt5.15.2+QtCreator10.0.1无法输入中文

1、前提条件 1)已经安装了fcitx sudo apt install fcitx sudo apt install fcitx-pinyin sudo apt install fcitx-bin fcitx-table-all sudo apt install fcitx-qt52)系统已经配置fcitx 3)将系统下 /usr/lib/x86_64-linux-gnu/qt5/plugins/platforminputcontexts/libfcitx…

基于YOLOv8车牌识别算法支持12种中文车牌类型(源码+图片+说明文档)

yolov8车牌识别算法&#xff0c;支持12种中文车牌类型 支持如下&#xff1a; 1.单行蓝牌 2.单行黄牌 3.新能源车牌 4.白色警用车牌 5.教练车牌 6.武警车牌 7.双层黄牌 8.双层白牌 9.使馆车牌 10.港澳粤Z牌 11.双层绿牌 12.民航车牌 图片测试demo: 直接运行detect_plate.py 或者…