CSS入门：前端样式优化

原创于 2024-12-17 11:30:13 发布 · 1.2k 阅读

31 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #css #开发语言 #青少年编程 #html #windows #visual studio code

🙉专栏推荐:Java入门知识🙉

🐹今日诗词:自古逢秋悲寂寥，我言秋日胜春朝🐹

⛳️点赞 ☀️收藏⭐️关注💬卑微小博主🙏

CSS

基本语法

行内样式

内部样式

CSS代码规范

3. id选择器

常用CSS样式

weight: 加粗

width/height: 设置宽度高度

改变显示模式

内边距和外边距

美图分享

CSS

概念

CSS就是在HTML页面基础上, 改变页面样式, 让页面更加好看, 说白了就是化妆

基本语法

语法: 选择器 + { 处理方式 }

作用: 选择需要处理的内容, 通过{ }里的方式对选择的内容进行处理

HTML页面中选择器需要搭配style属性使用

此时就有三种引入方式

行内样式

行内样式: 在标签内部引入CSS代码

内部样式

内部样式: 将style属性提取出来, 将CSS代码写到style标签内

外部样式(常用)

外部样式: 通过link标签的href属性引入外部的CSS文件

这种引入方式非常常用

语法: <link rel = "stylesheet" href = "CSS文件路径">

CSS代码规范

所有代码全部小写

选择器和 { 之间要有空格

键值对 : 后面也要有空格

不同键值对之间用换行

CSS选择器(重点)

CSS选择器有五种

1. 标签选择器
2. class选择器
3. id选择器
4. 复合选择器
5. 通配符选择器

为了方便演示这几种选择器的效果, 我们创建一下界面

方便练习, 源码如下, 可以通过alt+shift+f快速格式化代码

<!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>
        div {
            color: red;
        }
    </style>
</head>

<body>
    <div class="font32">
        我是⼀个div, class为font32</div>
    <div class="font32">
        我是⼀个div, class为font32</div>
    <div><a href="#">我是⼀个div</a></div>
    <ul>
        <li>aaa</li>
        <li>bbb</li>
        <li><a href="#">ccc</a></li>
    </ul>
    <ol>
        <li>1111</li>
        <li>2222</li>
        <li>3333</li>
    </ol>
    <button id="submit">
        提交
    </button>
</body>

</html>

1. 标签选择器

标签选择器: 选择指定的标签, 对所有选择的标签进行样式修改

2. class选择器

class选择器: 又叫类名选择器

语法: .类名 (通过点类名的形式选择一类的标签)

跟java中的类不太一样, 和生活中的类别相似, 说某某是一类人

学了两种选择器之后, 就会出现一个问题

多个选择器选择同一块内容会出现什么情况呢?

选择器优先级顺序: 就近原则, 离内容近的选择器的样式作为页面的样式

3. id选择器

id选择器

语法: #+id名

4. 复合选择器

复合选择器: 简单可以理解为多个选择器嵌套

什么时候会用到复合选择器呢?

后代复合选择器和子代复合选择器

后代复合选择器: 选中所有后代标签进行修改

子代复合选择器: 只选择儿子标签(只嵌套一层)进行修改

后代选择器的语法: 比如ul a, 表示选择ul标签中的所有a标签,子代的子代也会选中

子代选择器的语法: ul>a, 表示选择ul标签的子代a标签, ul的儿子标签, 子代的子代就不会选中

ul li a的写法更加具体更精确

ul a的写法如果ul里面也有a标签, 也会对a标签生效,比如下面

此时问题来了, 我只想选择ul里的a标签该如何选择呢?

答: 通过子代选择器

5. 通配符选择器

语法: * { }

表示选中页面的所有元素77

适用范围: 举个例子吧, 不同浏览器的页面, 字体的默认大小可能不同, 我们可以通过

通配符选择器让他们统一起来

常用CSS样式

color: 设置颜色

font-size: 设置大小

border: 设置边框

还有一种合并的写法, border也能识别到

weight: 加粗

width/height: 设置宽度高度

注意: 只有块级元素才能设置宽度和高度

常见块级元素: h1-h6, p, div

常见行内元素: a, span

块级元素独占一行, 可以设置宽高

行内元素只占据内容长度, 不能设置宽高

但是如果我就是想让span标签也能设置宽高

此时我们可以通过display标签将行内元素改成块级元素

或者将块级元素改成行内元素