文章目录
CSS一、什么是CSS二、语法规范三、引入方式1.内部样式表2.行内样式表3.外部样式 四、选择器1.选择器的种类1.基础选择器：单个选择器构成的1.标签选择器2.类选择器3.id 选择器4.通配符选择器 2.复合选择器1.后代选择器2.子选择器3.并集选择器4.伪类选择器 五、常用元素属性1.字体属性1.设置字体2.设置大小3.设置粗细4.文字样式 2.文本属性RBG1.文本颜色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-content2.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;}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; }3.设置粗细
.font-family .two { font-family: '宋体'; font-size: 30px; font-weight: bold; }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-FF255, 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; /*对背景图片的位置进行移动*/ }参数的三种风格:
方位名词: (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;4.圆角矩形
通过 border-radius 使边框带圆角效果
div { width: 400px; height: 200px; border: 2px green solid; /*solid显示线条 */ border-radius: 20px; }生成圆形
让 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 - h6pdivulolli<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.行内元素
astrongbemidelsinsuspan3.行内元素和块级元素的区别
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外边距 margin1.边框
粗细: 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;还有按照顺时针写四个px3.外边距
控制盒子和盒子之间的距离 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; /*定义在直接的父级元素上 加上后不再是行内元素，大小为自己设置的宽高 */ }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 的默认值
如果子元素没有被显示指定高度，就会填充父元素的高度点击移步博客主页，欢迎光临~
