🐷CSS是什么
css是啥呢?
英文是Cascading Style Sheets
叫做层叠样式表
一个前端页面如果只有HTML就会很单调,很丑,CSS就像一个化妆师,美化前端页面的元素,实现页面的样式和结构分离
🐷基本语法规范
来看看它的基本语法
选择器+{一条/N条声明}
选择器是针对谁来进行修改的
声明是修改啥
声明的属性是键值对分号区分键值对,冒号区分键和值
CSS 要写到 style 标签中(后面还会介绍其他写法)
style 标签可以放到页面任意位置. 一般放到 head 标签内.
CSS 使用 /* */ 作为注释. (使用 ctrl + / 快速切换)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> p { /* 设置字体颜色 */ color: red; /* 设置字体大小 */ font-size: 30px; } </style> <p>hello</p> </head> <body> </body> </html>
看看执行结果
🐷CSS引入方式
🥝内部样式
写在 style 标签中. 嵌入到 html 内部.
理论上来说 style 放到 html 的哪里都行. 但是一般都是放到 head 标签中,但是也可以不放到head里面,可以看到hello在head标签里面,而WYBYYDS不在head标签里面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> p { /* 设置字体颜色 */ color: red; /* 设置字体大小 */ font-size: 30px; } </style> <p>hello</p> </head> <body> <style> div{ font-size: 50px; color: green; } </style> <div>WYB YYDS</div> </body> </html>
优点: 这样做能够让样式和页面结构分离. 缺点: 分离的还不够彻底. 尤其是 css 内容多的时候
🥝外部样式
通过link标签,把CSS文件引入进来
如下图
🥝内联样式
<div style="color: blue;font-size: 50px;">WHY BBD</div> • 1
看效果图
我们在开发中一般用内部样式
🐷认识选择器
🍉标签选择器
使用标签名,把页面的所有同名标签都选中
缺点:太宽泛,没有针对性
🍉类选择器
CSS中创建一个类名,这个类名对应一组css属性
这里的类名和Java没关系,一个标签可以引入多个类名,多个类名使用空格分割
一个类名可以被多个标签引用
类选择器是最常用,功能最丰富的选择器
<div class="one">hhhhh</div>
结果如下:
🍉id选择器
一个HTML页面的标签可以有一个id属性,这个属性的值.作为标签的身份标识
是唯一的
CSS 中使用 # 开头表示 id 选择器
id 选择器的值和 html 中某个元素的 id 值相同
html 的元素 id 不必带 #
id 是唯一的, 不能被多个标签使用 (是和 类选择器 最大的区别)
<style> #ha { color: red; } </style> <div id="ha">哈哈哈</div>
🍉复合选择器(后代选择器)
复合选择器有很多,我们这里介绍后代选择器
效果就是把上述的的三种基础选择器进行组合,体现标签的层次结构
又叫包含选择器. 选择某个父元素中的某个子元素
元素 1 和 元素 2 要使用空格分割
元素 1 是父级, 元素 2 是子级, 只选元素 2 , 不影响元素 1
<ul> <li>aaa</li> <li>bbb</li> <li>ccc</li> </ul> <ol> <li>ddd</li> <li>eee</li> <li>fff</li> </ol> <style> ol li { color: red; } </style>
就像这个,父级元素是上面的三个字母,选中子元素修改不影响父元素
🐷CSS常见属性
🧊字体属性
.one{ font-size: 50px; color: blueviolet; font-family: '微软雅黑'; font-weight: 900; /* 字体样式是斜体 */ font-style: italic; }
🧊文本属性
<div class="two">你好,我是来自未来的哆啦A梦</div> • 1
看结果
颜色也可以用rgb的方式来表示
🧊背景属性
background-color设置背景颜色,写法和color一样
background-image设置背景图片
background-position 设置背景图的位置
background-size 设置背景大小
具体实现详见博客系统前端代码
🧊圆角矩形
通过 border-radius 使边框带圆角效果.
<div>蛤蛤</div> <style> div { width: 200px; height: 100px; border: 2px solid green; border-radius: 10px; } </style>
结果就是这样的
要是想让边框变成圆形,让border-radius的值变为宽度的一半
<style> div { width: 200px; height: 200px; border: 2px solid green; border-radius: 100px; /* 或者用50%也可以 */ border-radius: 50%; }
🐷Chrome 调试工具 – 查看 CSS 属性
打开网页,单击鼠标右键点解检查,或者Ctrl+f12,也可以打开
选择页面的某个元素,点击,就可以看到这个元素对应的前端代码
elements 查看标签结构
console 查看控制台
source 查看源码+断点调试
network 查看前后端交互过程
application 查看浏览器提供的一些扩展功能(比如本地存储)
这里多点开看看,就熟悉了
🐷元素显示模式
🌻块级元素
h1 - h6
p
div
ul
ol
li
独占一行 高度, 宽度, 内外边距, 行高都可以设置
宽度默认是父级元素宽度的 100% (和父元素一样宽) 是一个容器(盒子)
里面可以放行内和块级元素.
display:block块级元素
元素
🌻行级元素
display:inline 行内元素
a
strong
b
em
i
del
s
ins
u
span
不独占一行, 一行可以显示多个
设置高度, 宽度, 行高无效 左右外边距有效(上下无效).
内边距有效. 默认宽度就是本身的内容
行内元素只能容纳文本和其他行内元素, 不能放块级元素
display:none 实现元素隐藏的效果
🌻盒模型
一个HTML元素就是一个矩形
一个HTML元素由内容+内边框+边框+外边框构成
🌻弹性布局
对于块级元素,默认是独占一行的(垂直方向排列)
如果想让块级元素水平排列,采用弹性布局的方式,使用行内元素可以水平排列,但是不能设置尺寸啊!
1.开启弹性布局:display: flex;
flex就是古弹性布局的意思 某个元素一旦开启弹性布局,此时内部的子元素,就会按照水平方向排列,子元素的子元素不受影响
2.justify-content:设置水平方向的排列规则 居中排列,靠左,靠右,分散开等形式
3.align-items 设置垂直方向的排列规则
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div> <span>1</span> <span>2</span> <span>3</span> </div> <style> div { width: 100%; height: 150px; background-color: red; } div span { background-color: green; width: 100px; } </style> </body> </html>
当我们给 div 加上 display:flex 之后, 效果为
此时看到, span 有了高度, 不再是 "行内元素了
再给 div 加上 justify-content: space-around; 此时效果为
把 justify-content: space-around; 改为 justify-content: flex-end; 可以看到此时三个元素在右侧显示了.
代码给大家看一下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div> <span>1</span> <span>2</span> <span>3</span> </div> <style> div { width: 100%; height: 150px; background-color: red; display: flex; justify-content: flex-end } div span { background-color: green; width: 100px; } </style> </body> </html>
今天的讲解就到这里,我们下期再见了,886~~~
