CSS基础知识

最新推荐文章于 2025-07-30 15:47:02 发布

叻意

最新推荐文章于 2025-07-30 15:47:02 发布

阅读量589

点赞数 16

CC 4.0 BY-SA版权

文章标签： css 前端

本文链接：https://blog.youkuaiyun.com/zxcvbnm_1206/article/details/137358110

本文介绍了CSS的基本语法，如大括号中的键值对，常用的文本控制属性（如字体、字号、颜色等），以及选择器（标签选择器、ID选择器、类选择器和复合选择器）。还讨论了CSS的引入方式（内嵌、外链和行内），以及HTML5的新标签在网页结构中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

基本语法

css代码写在style标签里面，放在head标签中；大括号中写键值对语法

例子：属性名1：属性值1；属性名2：属性值2；

css常用文字控制属性

字体：font-family

字号：font-size

颜色：color

内容水平对齐方式：text-align: left/center/right

首行缩进：text-indent(em表示一个文字距离)

背景色：background

选择器

标签选择器

直接在css语法中写标签的名字就可以选中对应的标签

<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        p{color:red;}
        div{color:pink;}
        span{color:blue;}
    </style>
</head>
<body>

    <p>我是p</p>
    <div>我是div标签 代表大盒子（容器用于存放内容的）</div>
    <span>我是span标签 代表大盒子（容器用于存放内容的）</span>

</body>

id选择器

id相当于人的身份证是唯一的 不能重复使用 也不能一个人设置多个id

<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #p1{color:red;}
        #p2{color:blue;}
    </style>
</head>
<body>

    <p id="p1">我是p1</p>
    <p id="p2">我是p2</p>

</body>

类选择器

绝大多数使用类选择器，因为可以重复使用;

<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .p1{color:red;}
        .p2{color:blue;}
        .shxs{font-size:30px;}
    </style>
</head>
<body>

    <p class="p1 shxs">1111</p>
    <p class="p2">2222</p>
    <p class="p1">3333</p>

</body>

【Google案例】

<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        span{font-size: 100px;}
        .logo_bule{ color: blue;}
        .logo_juhong{ color: #cc3300}
        .logo_green{ color: green;}
    </style>
</head>
<body>
    <span class="logo_blue">G</span>
    <span class="logo_juhong">o</span>
    <span class="logo_blue">o</span>
    <span class="logo_green">l</span>
    <span class="logo_juhong">e</span>
</body>

基础选择器权重

权重优先级：id选择器>类选择器>标签选择器

复合选择器

后代选择器

div span{} 用空格来连接，代表的意思是找到后代元素（包括儿子、孙子等）

并级选择器

div, span, h1, .span1, #span2{} 用逗号连接选择器，代表这些元素同时被选中

css引入形式

内嵌式：写在style标签里面，放在head标签中
外链式：利用放在head中的link标签连接.css文件<link rel="stylesheet" type="text/css" href="my_css.css"/>
行内css：写在行里<p style="color: red;">内容</p>

【优缺点】 内嵌式：方便课上案例的书写，电商网站的首页必须使用这种方式，因为要求加载速度必须快，内嵌式比外链式快一些；外链式好处：代码分离，方便修改和管理；行内样式：千万不要用，会让代码量变得非常庞大，不方便修改！

标签指定式/指定标签式

div.类名

注意：标签和类名之间没有空格

高级权重对比

引入方式对比

外链和内嵌权重相同，先写的会被后写的覆盖；

行内的权重最大，如果想覆盖它，就只能给样式中添加！important来把权重提高

复合选择器权重

id我们认为100斤 class类名认为10斤标签认为1斤

综合起来大的权重就高，如果权重一样，先写的被后写得覆盖

常用文字属性

font-weight: normal/bold（正常/加粗）

font-style: normal/italic（正常/倾斜）

text-decoration: none/line-through/underline/overline（不要线/贯穿线/下划线/上划线）

word-break: break-all（强制换行）

:hover{color: green}: 鼠标悬停状态的样式设置这种写法叫伪类

行高属性

一行文字的结束到上一行文字结束的间距：line-height

边框属性

border: 1px solid green（solid代表实线，dashed代表虚线）

单独设置每个边：border-bottom（top、left、right）

注意：边框属性只有实线和虚线是没有兼容性问题的，其他方式的线都会有不同程度的兼容问题，如果程序员使用了，一定要报错！

CSS盒子模型

宽高+边框+内边距（内容和边框的距离）+外边距（盒子和盒子之间的距离）=盒子模型的组成

width；height；border；padding；margin

html5新标签

header头部 nav导航条 aside侧导航 article文章块 footer底部

<nav>导航条</nav>
<aside>侧导航</aside>
<article>文章块</article>
<footer>底部</footer>

说明：内容来源b站黑马程序员软件测试基础教程视频