CSS语法

最新推荐文章于 2025-08-18 20:44:42 发布

原创最新推荐文章于 2025-08-18 20:44:42 发布 · 582 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

css 专栏收录该内容

0 篇文章

订阅专栏

本教程全面介绍CSS的基础知识，包括样式定义、层叠次序、浏览器默认设置、选择器应用、继承与派生、ID与类选择器、属性选择器等核心概念。同时，深入探讨CSS框模型、内边距、边框和外边距的使用方法，以及如何创建外部、内部和内联样式表。通过实例解析，帮助开发者掌握CSS在网页布局和样式设计中的应用。

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

CSS基础教程

CSS简介

CSS概述

CSS指层叠样式表（Cascading Style Sheets）
决定HTML元素如何显示
内容与样式分离
多个样式定义可层叠为一

层叠次序

浏览器缺省设置
外部样式表
内部样式表（位于标签内部）
内联样式（在 HTML 元素内部）

CSS基本语法

CSS语法结构

CSS高级语法

选择器的分组

h1,h2,h3,h4,h5,h6 {
  color: green;
}

继承

body  {
     font-family: Verdana, sans-serif;
}

<!-- 继承body中的属性 -->
td, ul, ol, ul, li, dl, dt, dd  {
     font-family: Verdana, sans-serif;
}

<!-- 重写从body中继承的属性 -->
p  {
     font-family: Times, "Times New Roman", serif;
}

派生选择器

<!-- 只有h2标签中的strong才会是蓝色-->
h2 strong {
     color: blue;
}

id选择器

<!-- id选择器 -->
#sidebar {
    border: 1px dotted #000;
}

<!-- 利用id创建派生选择器 -->
#sidebar h2 {
    font-size: 1em;
}

类选择器

<h1 class="center"></h1>

.fancy {
    color: #f60;
}

.fancy td {
    color: #f60;
}

td .fancy {
    color: #f60;
}

td.fancy {
    color: #f60;
}

属性选择器

[title]
{
    color:red;
}

[title=W3School]
{
    border:5px solid blue;
}

input[type="text"]
{
  width:150px;
}

CSS创建

外部样式表

<head>
    <link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

内部样式表

<head>
<style type="text/css">
  p {margin-left: 20px;}
</style>
</head>

内联样式

<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>

CSS框模型

CSS框模型概述

类似android控件中margin和padding属性

CSS 内边距

padding 属性接受长度值或百分比值，
不允许使用负值。
使用百分比时，上下内边距的百分数会相对于父元素宽度设置，而不是相对于高度。

/* 上、右、下、左的顺序分别设置各边的内边距，各边均可以使用不同的单位或百分比值 */
h1 {
    padding: 10px 0.25em 2ex 20%;
}
/* 分开写 */
h1 {
    padding-top: 10px;
    padding-right: 0.25em;
    padding-bottom: 2ex;
    padding-left: 20%;
}

CSS 边框

样式

border-style 的默认值是 none，如果没有声明样式，就相当于 border-style: none

p {border-style: solid solid solid none;}
p {border-style: solid; border-left-style: none;}

宽度

必须设置border-style，才能生效

p {
    border-width: 15px 5px 15px 5px;
    border-top-width: 15px;
    border-right-width: 5px;
    border-bottom-width: 15px;
    border-left-width: 5px;
}

颜色

p {
    border-style: solid;
    border-color: blue rgb(25%,35%,45%) #909090 red;
}

CSS外边框

p { margin: 20px 30px 30px 20px; }
h2 {
    margin-top: 20px;
    margin-right: 30px;
    margin-bottom: 30px;
    margin-left: 20px;
}

CSS 外边距合并

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。