CSS基础入门

一、CSS简介

CSS：层叠样式表(英文全称：Cascading Style Sheets)，是一种用来是一种描述 HTML 文档样式的语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

二、CSS语法

CSS 规则集（rule-set）由选择器和声明块组成：

选择器指向您需要设置样式的 HTML 元素。

声明块包含一条或多条用分号分隔的声明。

每条声明都包含一个 CSS 属性名称和一个值，以冒号分隔。

多条 CSS 声明用分号分隔，声明块用花括号括起来。

示例：

/*选择器选择p标签*/
p{
    /*颜色的声明*/
    color:red;  /*属性：color 值：red*/
    /*字体大小的声明*/
    font-size:15px;
}

三、CSS使用方式（引入方法）

1.在标签中直接使用

通过标签的style属性，直接给标签设置CSS样式。

<div style="color: red;">这是div标签</div>

2.在head标签中通过style标签设置CSS

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 200px;
            height: 50px;
            border: 1px solid red;
        }
        p {
            color: red;
        }
    </style>
</head>
<body>
    <div>
        这是div标签
    </div>
    <p>这是p标签</p>
</body>
</html>

3.引入外部CSS样式

在head中通过link标签，链接带外部样式表到页面中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="common.css">
</head>
<body>
    <div>
        这是div标签
    </div>
    <p>这是p标签</p>
</body>
</html>

common.css文件内容如下：

div {
    width: 200px;
    height: 50px;
    border: 1px solid red;
}
p {
    color: blue;
}

四、CSS常见选择器

1.类选择器

通过点（.）加类名选择标签

示例：

/*选择具有属性 class="cname1“的标签*/
.cname1 {
    color: blue;
}

<div class="cname1">
        这是div标签
</div>

2.ID选择器

通过#号加标签id来选择标签

示例：

/*选择id="aaa“的标签*/
#aaa {
    color: blue;
}

<div id="aaa">
        这是div标签
</div>

3.标签选择器

通过标签名选择标签

/*选择p标签(默认会选择所有的p标签)*/
p {
    color: blue;
}

<p>这是p标签</p>

4.属性选择器

通过标签名[属性名] 或标签名[属性名=属性值] 来选择标签

/*选择具有attr属性的p标签*/
p[attr] {
    color: green;
}

/*两个p标签都会选中*/
<p attr="abc">这是p标签</p>
<p attr="cba">这是p标签</p>

/*选择attr属性值为abc的p标签*/
p[attr="abc"] {
    color: green;
}

/*attr="cba"的p标签不会被选中*/
<p attr="abc">这是p标签</p>
<p attr="cba">这是p标签</p>

5.后代选择器

/*选择class值为aaa的标签下的p标签*/
.aaa p{
    color: green;
}

/*2个p标签都会被选到*/
<div class="aaa">
        <p>这是class为aaa的div下的p标签</p>
        <div>
            <p>这是class为aaa的div标签下的div标签下的p标签</p>
        </div>
</div>

/*选择class值为aaa的标签下的p标签，仅选取子级*/
.aaa > p{
    color: green;
}

/*仅会选取到第一个p标签*/
<div class="aaa">
        <p>这是class为aaa的div下的p标签</p>
        <div>
            <p>这是class为aaa的div标签下的div标签下的p标签</p>
        </div>
</div>

此外，如果多个选择器设置相同的css样式，可以用逗号隔开，如：

.abc, p, #aaa{
    color: blue;
}

多个样式的覆盖问题：

如果一个标签有多个CSS样式，会以后载入的为主，如：

.c1 {
    color: blue;
}

.c2 {
    color: gold;
}

<!--多个class值可以用空格隔开-->
<!--css文件中c2在下方，p标签会显示金色-->
<p class="c1 c2">这是p标签</p>

.c2 {
    color: blue;
}

.c1 {
    color: gold;
}

<!--多个class值可以用空格隔开-->
<!--css文件中c1在下方，p标签会显示蓝色-->
<p class="c1 c2">这是p标签</p>

如果不希望样式被覆盖，可以使用 !important 表示不希望被覆盖：

.c1 {
    color: blue !important;
}

.c2 {
    color: gold;
}

<!--p标签最后显示蓝色-->
<p class="c1 c2">这是p标签</p>

五、常见CSS样式

1.块级和行内标签

如 div标签默认是块级标签，可以通过css样式 display:inline-block 将div标签设置为同时具备块级标签和行内标签的特点，display:inline将标签设为行内标签，display:block 将标签设为块级标签。

2.宽度和高度

height 和 width 属性用于设置元素的高度和宽度。

height 和 width 属性可设置如下值：

auto - 默认。浏览器计算高度和宽度。
length - 以 px、cm 等定义高度/宽度。
% - 以包含块的百分比定义高度/宽度。

注意：一个块级标签，设置某个宽度（比如50%），默认情况下，该行剩余的部分也无法被其他标签占用。

.aaa {
    height: 200px;
    width: 50%;
}

<div class="aaa">
        这是div标签
</div>
<span>这是span标签</span>

将其设为行内-块级标签，空出的部分就可以被其他标签使用。

.aaa {
    height: 200px;
    width: 50%;
    display: inline-block;
}

3.颜色

在css中，可以通过使用预定义的颜色名称，或 RGB、HEX、HSL、RGBA、HSLA 值来指定颜色。

（1）背景色

通过 background-color 来设置背景色

<h1 style="background-color: gold;">这是h1标签</h1>

（2）文本颜色

直接使用 color 设置文本颜色

<h1 style="color: gold;">这是h1标签</h1>

（3）边框颜色

<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>

4.字体相关

（1）字体

在 CSS 中，我们使用 font-family 属性规定文本的字体。

font-family 属性应包含多个字体名称作为“后备”系统，以确保浏览器/操作系统之间的最大兼容性。请以您需要的字体开始，并以通用系列结束（如果没有其他可用字体，则让浏览器选择通用系列中的相似字体）。字体名称应以逗号分隔。

注释：如果字体名称不止一个单词，则必须用引号引起来，例如："Times New Roman"。

.p1 {
  font-family: "Times New Roman", Times, serif;
}

.p2 {
  font-family: Arial, Helvetica, sans-serif;
}

<p class="p1">这是p标签</p>
<p class="p2">这是p标签</p>

效果如下：

（2）字体样式

font-style 属性主要用于指定斜体文本。
- normal - 文字正常显示
- italic - 文本以斜体显示
- oblique - 文本为“倾斜”（倾斜与斜体非常相似，但支持较少）
font-weight 属性指定字体的粗细：
font-size 属性设置文本的大小。

注释：如果您没有指定字体大小，则普通文本（如段落）的默认大小为 16px（16px = 1em）。

字体大小可以通过像素设置，如：font-size: 14px;

也可以使用em设置，1em 等于当前字体大小。浏览器中的默认文本大小为 16px。因此，默认大小 1em 为 16px。

可以使用这个公式从像素到 em 来计算大小：pixels/16=em。

5.文本对齐方式

text-align 属性用于设置文本的水平对齐方式。
vertical-align 属性设置元素的垂直对齐方式。

6.浮动

详见 W3School CSS浮动。

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：

当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。

如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。

如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”：

float 属性规定元素如何浮动。clear 属性规定哪些元素可以在清除的元素旁边以及在哪一侧浮动。

float 属性可以设置以下值之一：

left - 元素浮动到其容器的左侧
right - 元素浮动在其容器的右侧
none - 元素不会浮动（将显示在文本中刚出现的位置）。默认值。
inherit - 元素继承其父级的 float 值。

7.内边距

padding 属性用于在任何定义的边界内的元素内容周围生成空间，即内边距。

CSS 拥有用于为元素的每一侧指定内边距的属性：

padding-top
padding-right
padding-bottom
padding-left

所有内边距属性都可以设置以下值（注意：不允许负值。）：

length - 以 px、pt、cm 等单位指定内边距
% - 指定以包含元素宽度的百分比计的内边距
inherit - 指定应从父元素继承内边距

也可以直接使用padding设置边距：

padding: 5px 10px 15px 20px;

上述表示上边距 5px，右边距10px，下边距 15px ，左边距 20px。（上右下左，即顺时针方向）

padding: 5px 10px;

上述表示上下边距 5px，左右边距10px。

padding: 5px;

上述表示四个边距都是5px。

内边距和元素宽度：

width 属性指定元素内容区域的宽度。内容区域是元素（盒模型）的内边距、边框和外边距内的部分。

因此，如果元素拥有指定的宽度，则添加到该元素的内边距会添加到元素的总宽度中。

如：

div {
  width: 300px;
  padding: 25px;
}

这里，<div> 元素的宽度为 300px。但是，<div> 元素的实际宽度将是 350px（300px + 左内边距 25px + 右内边距 25px）。

若要将宽度保持为 300px，无论填充量如何，那么可以使用 box-sizing 属性。这将导致元素保持其宽度。但如果增加内边距，则可用的内容空间会减少。

div {
  width: 300px;
  padding: 25px;
  box-sizing: border-box;
}

8.外边距

margin 属性用于在任何定义的边框之外，为元素周围创建空间，即定义外边距。

margin-top：上边距
margin-right：右边距
margin-bottom：下边距
margin-left：左边距

同内边距类似，可以设置以下值，外边距允许负值：

length - 以 px、pt、cm 等单位指定内边距
% - 指定以包含元素宽度的百分比计的内边距
inherit - 指定应从父元素继承内边距

同内边距一样，外边距可以用 margin 直接设置：

padding: 5px 10px 15px 20px;

padding: 5px 10px;

padding: 5px;

外边距还可以设为auto，以使元素在其容器中水平居中。

然后，该元素将占据指定的宽度，并且剩余空间将在左右边界之间平均分配。

.aaa {
    height: 200px;
    width: 50%;
    background-color: #09E0B5;
    margin: auto;
}

<div class="aaa">
        这是div标签
</div>

效果如下：

水平居中仅需将左右外边距设为auto即可。

.aaa {
    height: 200px;
    width: 50%;
    background-color: #09E0B5;
}
.bbb {
    height: 100px;
    width: 100px;
    border: 1px solid #3D7FBB;
    background-color: gold;
    margin: 5px auto;
}

<div class="aaa">
        <div class="bbb">div下的div标签</div>
</div>

效果如下：

posted on 2023-05-11 17:05 木去阅读(311) 评论(0) 收藏举报

刷新页面返回顶部

CSS基础 入门

CSS基础 入门

一、CSS简介

二、CSS语法

三、CSS使用方式（引入方法）

1.在标签中直接使用

2.在head标签中通过style标签设置CSS

3.引入外部CSS样式

四、CSS常见选择器

1.类选择器

2.ID选择器

3.标签选择器

4.属性选择器

5.后代选择器

五、常见CSS样式

1.块级和行内标签

2.宽度和高度

3.颜色

（1）背景色

（2）文本颜色

（3）边框颜色

4.字体相关

（1）字体

（2）字体样式

5.文本对齐方式

6.浮动

7.内边距

8.外边距

公告

CSS基础入门

CSS基础入门