在前端的代码中,CSS 相关的代码写在什么位置呢?
class 中即为标签的内容,.green就表示选中所有class = green 的标签。
演示界面
你好
id 中即为标签的内容,#one 就表示选中所有 id = one 的标签。
演示界面
你好
style 标签中的 div 即表示选中所有的 div 标签。
id 选择器、类选择器、标签选择器可以组合使用。
演示界面
你好
* 表示选中所有的标签。
作用 | 特点 | |
标签选择器 | 选出所有相同的标签 | 不能差异化选择 |
类选择器 | 选出一个或多个标签 | 根据需求选择,最灵活,最常用 |
id 选择器 | 选出一个标签 | 同一个 id 在 HTML 中只能出现一次 |
通用选择器 | 选择所有标签 | 特殊情况下使用 |
后代选择器又叫包含选择器,选择某个父元素中的某个子元素,只影响子元素。
演示界面
你好
- aaa
- bbb
- ccc
ul li a 即选择 ul 标签下的 li 标签的子标签 a 中的内容。
注意:ul li a 中可以省略 li ,此时同样表示选中 a 标签(即在 ul 的后代中寻找 a 标签是否存在)。但是,当为 ul > a 时,则找不到 a 标签,因为 > 表示的是紧跟着的子代,也就是在 ul 的子代中寻找 a 标签,不能跨越子代去孙子一代中查找,也就是我们接下来要认识的子代选择器。
CSS:
.cat>a {
color: red;
}
body {
font-family: '微软雅黑';
font-family: 'Microsoft YaHei';
}
p {
font-size: 20px;
}
p {
font-weight: bold;
font-weight: 500;
}
bold 表示的是 700,400是不变粗(normal),字体粗细的取值范围是100-900之间。
/* 设置倾斜 */
font-style: italic;
/* 取消倾斜 */
font-style: normal;
我们使用三原色来表示颜色即 RGB,R-red,G-green,B-blue,这三个颜色按照不同的比例搭配可以表示各种颜色。每个颜色被分为了 256 份,表示的范围是 0-255,可以表示 2^24 种颜色,数值越大,表示颜色越深。例如,255,255,255 表示的就是白色,而 0,0,0 表示的就是黑色。
因此,我们可以使用以下三种方式来控制文本的颜色:
demo
你好
text-align:center
text-align:left
text-align:right
以上分别表示居中对齐、左对齐和右对齐,不仅可以用来控制文本,也可以用来控制其他元素,比如图片等。
通过上面的图片我们可以知道,早默认情况下超链接是有下划线的,如果不想要下划线显示,可以通过以下代码去掉下划线。
在 HTML 章节中,我们学习过 p 标签,p 标签内的文本内容通常没有首行缩进,因此在 CSS 中,我们可以设置首行缩进。
在 CSS 中表示尺寸的单位有两种:px 和 em。
上图可以看到 p 标签中的段落内容并没有首行缩进,此时执行以下代码:
此时,段落内容按照指定格式缩进了 30 px,而实际上我们更常用的是段落首行缩进两个字符,因此私用 em 作为单位更为合适。但是在使用时需要特别注意的是 2 em 缩进两个字体就是缩进两个中文字符,也就是缩进四个英文字符。下面我们来验证中文字符的缩进,可以自行验证英文字符的缩进。
行高:即两个顶线(基线、中线、底线)之间的距离。
HTML 中展示文字设计到以下基准线:
修改行高后的效果如下图所示:
在选择图片作为背景时,通常还会设置图片的宽度和高度,它们可以相对大小(80%,表示相对父元素)也可以为绝对大小(600px)。
url 中相对路径和绝对路径都可以实现。
背景图片和背景颜色可以同时存在,当背景图片并没有完全占据整个背景时,空余部分依旧以原背景颜色填充。
下面来演示一下图片的平铺,注意:当图片较大时可能看不到平铺的效果,因为一张图片可能就占据了整个背景。可以自行验证其他样式的平铺。
background-position: x y;
背景位置用来修饰图片的位置,参数有以下三种风格:
在计算机中的坐标系和我们平时在在数学中的坐标系不一样,在计算机中左上角为坐标原点,向右为 X 轴,向下为 Y 轴。
注意:
下面我们演示将图片居中:
我们可以通过 border 给所选区域加上边框,如下图所示,向 p 标签中的内容加上边框。
border-radius 使边框带圆角效果。
border-radius 后边的值可以是相对大小(50%),也可以是绝对大小(50px)。值越大弧度越明显。
那么,我们如何画一个圆呢?
方法:先画一个正方形,然后让 border-radius 的值为正方形边长的一半即可。
画图形
将 100px 改为 50% 同样可以实现以下效果。
行内元素占一行中的一部分,因此单独对行内元素的高度和宽度进行修改是不成功的。而块级元素则可以独占一行。我们可以通过 display inline 将块级元素变为行内元素;也可以通过 display block 将行内元素变为块级元素。
每一个 HTML 元素就相当于是一个矩形的 "盒子"。这个盒子由以下几个部分构成:
也可以将以上 CSS 代码简写:border:1px solid red ;可以看到,根据就近原则,最终边框颜色为蓝色。
在给加了边框后,会将盒子撑大,如下图左下角所示。
由原来的 500 x 2500 变成了 519.2 x 269.2。那么边框就类似于房间的枪占据的面积。
通过 box-sizing 属性可以修改浏览器的行为, 使边框不再撑大盒子。
通过 padding 设置内容和边框之间的距离。在默认情况下,内容是顶着边框放置的,因此可以通过 padding 来调整内容和边框之间的距离。 可以给四个方向均加框:
height: 200px;
width: 300px;
padding-top: 5px;
padding-left: 10
可以看到内边距同样会撑大盒子,使用 box-sizing:boder-box 属性也可以使内边距不再撑大盒子。
复合写法:
外边距用来控制盒子与盒子之间的距离,可以给四个方向都加框。
复合写法:
注意:
六、去除浏览器默认样式
在不同的浏览器中,同样的代码可能会有不同的显示,因此,我们需要去除浏览器的默认样式,可以使用通配符来完成:
flex 是 flexible box 的缩写. 意思为 "弹性盒子".任何一个 html 元素, 都可以指定为 display:flex 完成弹性布局.
flex 布局的本质是给父盒子添加 display:flex 属性, 来控制子盒子的位置和排列方式。
在使用前需要确定好主轴是哪个方向,然后通过 justify-content 设置主轴上的子元素排列方式。
未指定 justify-content 时,默认按照从左到右的方向布局。
设置 justify-content: flex-end , 元素都排列到右侧。
设置 jutify-content: center , 元素居中排列。
设置 justify-content: space-around;平分了剩余空间.
设置 justify-content: space-between;先两边元素贴近边缘, 再平分剩余空间
设置侧轴上的元素排列方式 。
align-items:center; 实现垂直居中。
演示
1
2
3
4
5
注意:align-items 只能针对单行元素来实现. 如果有多行元素, 就需要使用 item-contents
关于 CSS 的一些基础知识,就先总结到这里啦~