CSS基础

CMCJR

已于 2023-02-14 13:57:45 修改

阅读量400

点赞数

分类专栏：前端基础学习文章标签： css 前端

于 2022-03-30 23:07:21 首次发布

本文链接：https://blog.csdn.net/weixin_52135318/article/details/123772223

版权

前端基础学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

文章目录

1.CSS引入方式
2.基础选择方式
3. 字体和文本样式
综合案例

1.CSS引入方式

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

2.基础选择方式

2.1 标签选择器

结构： 标签名 {CSS属性名 : 属性值 ;}
作用：通过标签名找到页面中所有这类标签，设置样式
注意点：
1. 标签选择器选择的是一类标签，而不是单独某一个
2. 标签选择器无论嵌套关系有多深，都能找到对应的标签

2.2 类选择器

结构：.类名{CSS属性名：属性值;}
作用：通过类名，找到页面中所有带有这个类名的标签，设置样式
注意点：
1. 所有标签上都有class属性，class属性的属性值称为类名
2. 类名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头
3. 一个标签可以同时有多个类名，类名之间以空格隔开
4. 类名可以重复，一个类选择器可以同时选中多个标签

2.3 id选择器

结构：#id属性值 {CSS属性名：属性值；}
作用：通过id属性值，找到页面中带有这个id属性值的标签，设置样式
注意点：
1. 所有标签都有id属性
2. id属性值类似于身份证号码，在一个页面中是唯一的，不可重复的！
3. 一个标签上只能有一个id属性值
4. 一个id选择器只能选中一个标签

2.4 通配符选择器

结构：*{CSS属性名：属性值；}
作用：找到页面中所有的标签，设置样式
注意点：
1. 开发中使用少，只会在极特殊情况下才会用到
2. 在小页面中可能会用于去除标签默认的margin和padding

3. 字体和文本样式

3.1 字体大小

属性	属性名	取值	注意点
字体大小	`font-size`	`数字+px`	Google默认大小16px
字体粗细	`font-weight`	关键字：`normal/bold` 纯数字：`400/700` (100~900整百数)	不是所有字体都有9种粗细；正常、加粗两种取值使用最多
字体是否倾斜	`font-style`	正常：`normal` 倾斜：`italic`

3.2 字体系列 font-family

属性名： font-family
常见取值： 具体字体1,2,3,4…
- 具体字体：微软雅黑、黑体、宋体等
- 字体系列：sans-serif、monospace等
渲染规则：
1. 从左往右按顺序查找，如果电脑中未安装该字体，则显示下一个字体
2. 如果都不支持，此时会更具操作系统，显示最后字体系列的默认字体
注意点：
1. 如果字体名称中存在多个单词，推荐使用引号包裹
2. 最后一项字体系列不需要引号包裹
3. 网页开发时，尽量使用系统常见自带字体，保证不同用户浏览网页都可以正确显示

<title>Document</title>
    <style>
        p{
            font-size: 30px;
            /* 加粗 */
            font-weight: 700;
        }

        h1{
            /* 变细 */
            font-weight: 400;
        }

        div{
            /* 倾斜 */
            font-style: italic;
        }

        em{
            /* 正常 */
            font-style: normal;
        }
        h1{
            /* 如果用户没有安装楷体,就按微软雅黑显示 */
            /* 如果用户没有安装微软雅黑,就按任意一种sans-serif显示 */
            font-family: 楷体,微软雅黑,sans-serif;
        }
    </style>
</head>
<body>
    <!-- 默认字号是16 -->
    <p>段落文字</p>
    <h1>这是一级标题</h1>
    <div>div文字</div>
    <em>em</em>
    
</body>

3.3 样式层叠问题

如果给同一个标签设置了相同的属性,此时样式会层叠(覆盖),写在最下面的会生效
CSS(Cascading style sheets) ——层叠样式表
所谓层叠即叠加的意思,表示样式可以一层一层的层叠覆盖

3.4 font相关属性连写

属性名：font(复合属性)
取值： font : style weight size family;
省略要求： 只能省略前两个,如果省略了相当于设置了默认值
注意点： 如果需要同时设置单独和连写形式
- 要么把单独的样式写在连写的下面
- 要么把单独的样式写在连写的里面

3.5 文本缩进

属性名： text-indent
取值：
- 数字 + px
- 数字 + em (推荐：1 em = 当前标签的font-size的大小)

3.6 文本水平对齐

属性名：text-align
属性值： left——左对齐，center——居中对齐，right——右对齐
text-align:center能让哪些元素水平居中：
1. 文本
2. span标签、a标签
3. input标签、img标签
注意点： 如果需要让以上元素水平居中，text-align:center需要给以上元素的父元素设置

3.7 文本修饰

属性名：
取值：

属性值	效果
`underline`	下划线(常用)
`line-through`	删除线(不常用)
`overline`	上划线(几乎不用)
`none`	无装饰线(常用)

注意点： 开发中会使用text-decoration:none；清除a标签默认的下划线

3.8 行高

**作用：**控制一行的上下行间距
属性名： line-height
取值：
- 数字 + px
- 倍数（当前标签font-size的倍数）
应用：
- 让单行文本垂直居中可以设置 line-height：文字父元素高度
- 网页精准布局时，会设置line-height：1 可以取消上下间距
行高与font连写的注意点：
- 如果同时设置了行高和font连写，注意覆盖问题
- font：style weight size/line-height family;