认识CSS

约 702 字大约 2 分钟

2024-07-07

CSS初识

CSS(Cascading style sheets)层叠样式表，用于美化HTML标签
最后一个相同样式名会覆盖掉之前的属性值，除非!important

CSS写在style标签中，style标签一般写在和head标签里面，title标签下面

美化对象{
	属性名:属性值
}

CSS引入方式

引入方式	书写位置	作为范围	使用场景
内嵌式	CSS写在style标签中	当前页面	单页面
外联式	CSS写在一个单独的.css文件中需要通过link标签在网页中引入	多个页面	项目中
行内式	CSS写在标签的style属性中	当前标签	配合js使用

媒体查询

内联样式

/* 视口宽度小于等于768px， 网页背景色是粉色 */
@media (max-width: 768px) {
    body {
        background-color: pink;
    }
}

/* 视口宽度大于等于1200px， 网页背景色是skyblue */
@media (min-width: 1200px) {
    body {
        background-color: skyblue;
    }
}

外部CSS

<link rel="stylesheet" href="./one.css" media="(min-width: 992px)">
<link rel="stylesheet" href="./two.css" media="(min-width: 1200px)">

基础选择器

提示

!important>行内样式>id选择器>类选择器>标签选择器>通配符选择器>继承

class

id

通配符

警告

尽量少用，会占用系统资源，影响用户访问速度，建议使用标签选择器

显示模式

字体样式

属性名	含义	取值	注意
font-size	字号	1.数字+px/em/rm 2.百分比 3.inherit	谷歌默认文字大小为16px 单位需要设置
font-weight	字重	1.normal/bold 2.100的整百数	不是所有字体都支持
font-style	倾斜	normal/italic
font-family	字体	字体名称	最后一项不需要引号包裹

复合写法

div {
    /* font:style weight/line-height family*/
    font:italic 700 24px/1.8 宋体;
}

文本样式

名称	说明	值
text-indent	缩进
text-align	水平对齐	left/center/right
text-decoration	修饰线	underline/line-through/overline/none
line-height	行高	行高=字体大小，实现垂直居中

居中

水平居中

div {
    width: 300px;
    height: 300px;
    background-color: pink;
    margin: 0 auto;
}

垂直居中

div {
    width: 552px;
    height: 400px;
    background-color: pink;
    /* background-color: green; */
    text-align: center;
    /* 文字是单行的 */
    /* 垂直居中技巧: 设置行高属性值 = 自身高度属性值 */
    line-height: 400px;
    font-size: 61px;
}