CSS样式基本知识

最新推荐文章于 2024-07-21 20:52:32 发布

锋少的技术博客

最新推荐文章于 2024-07-21 20:52:32 发布

阅读量922

点赞数

分类专栏： WEB HTML 文章标签： css html cascading 浏览器

本文链接：https://blog.csdn.net/feng2qing/article/details/72778288

版权

WEB 同时被 2 个专栏收录

19 篇文章 0 订阅

订阅专栏

HTML

14 篇文章 1 订阅

订阅专栏

一：CSS样式

CSS全称为“层叠样式表 (Cascading Style Sheets)”，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。

<head>
    <meta charset="UTF-8">
    <title>CSS样式</title>
    <style>
        p {
            font-size: 20px;     /*字号*/
            color: red;         /*颜色*/
            font-weight: bold;  /*加粗*/
        }
    </style>
</head>
<body>
<p>Stevin三天三夜的专栏</p>
</body>

显示效果：

这里写图片描述

二：CSS样式的优势

可以为不同文本内容设置同一样式，把需要设置样式的文本用`<span></span>`标签括起来，然后在style内设置样式

<head>
    <meta charset="UTF-8">
    <title>CSS样式</title>
    <style>
        p {
            font-size: 20px;     /*字号*/
            color: red;         /*颜色*/
            font-weight: bold;  /*加粗*/
        }
        span {
            color: blue;
        }
    </style>
</head>
<body>
<p>Stevin三天三夜的专栏</p>
<p>百度大厦位于北京海淀区上地信息产业基地北区7号地块。
    北至上地北路，<span>南至西北旺南路，</span>>东至上地村中路，西至内部1号路。
    用地北侧为联想研发及生产基地、<span>盈创动力和在建项目辉煌国际广场，</span>>
    南侧为美国安娜络、上地国际创业园，<span>东侧为数码科技广场、</span>神州数码、
    北方烽火和京蒙高科，西侧为上地6号写字楼群和著名的中关村软件园。</p>
</body>

显示效果：

这里写图片描述

三：CSS代码语法

CSS样式由选择符和声明组成，声明包括属性和值组成

这里写图片描述

选择符：又称选择器，指明网页中要应用样式规则的元素，如上面的是网页中所有的段（span）的文字将变成蓝色

声明：在英文大括号“｛｝”中的的就是声明，属性和值之间用英文冒号“：”分隔。当有多条声明时，中间可以英文分号“;”分隔

注意：最后一条声明可以没有分号，但是为了以后修改方便，一般也加上分号。为了使用样式更加容易阅读，可以将每条代码写在一个新行内

<style>
    p {
        font-size: 20px;     /*字号*/
        color: red;         /*颜色*/
        font-weight: bold;  /*加粗*/
     }
    span {
        color: blue;
     }
</style>

四：CSS代码注释

CSS代码注释使用：`/注释语句/`

HTML代码注释使用：``

选中要注释的代码按下`command+/`自动注释

CSS代码注释：
/*span {*/
    /*color: blue;*/
/*}
HTML代码注释：
<!--<p>Stevin三天三夜的专栏</p>-->

五：内联式CSS样式

内联式css样式表就是把css代码直接写在现有的HTML标签中，例如：`<p style="color:red">这里文字是红色。</p>`

注意要写在元素的开始标签里，下面这种写法是错误的：`<p>这里文字是红色。</p style="color:red">`

并且css样式代码要写在style=”“双引号中，如果有多条css样式代码设置可以写在一起，中间用分号隔开。如下：`<p style="color:red;font-size:12px">这里文字是红色。</p>`

<p style="color: aqua">Stevin三天三夜</p>

显示效果：

这里写图片描述

六：嵌入式CSS样式

嵌入式css样式，就是可以把css样式代码写在`<style type="text/css"></style>`标签之间

嵌入式css样式必须写在`<style></style>`之间，并且一般情况下嵌入式css样式写在`<head></head>`之间

<style type="text/css">
    span {
        color: blue;
    }
</style>

<body>
<p>百度大厦位于北京海淀区上地信息产业基地北区7号地块。
    北至上地北路，<span>南至西北旺南路，</span>>东至上地村中路，西至内部1号路。
    用地北侧为联想研发及生产基地、<span>盈创动力和在建项目辉煌国际广场，</span>>
    南侧为美国安娜络、上地国际创业园，<span>东侧为数码科技广场、</span>神州数码、
    北方烽火和京蒙高科，西侧为上地6号写字楼群和著名的中关村软件园。
</p>
</body>

显示效果：

这里写图片描述

七：外部式CSS样式

外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名，在`<head>`内（不是在`<style>`标签内）使用`<link>`标签将css样式文件链接到HTML文件内，如下：`<link href="base.css" rel="stylesheet" type="text/css" />`

css样式文件名称以有意义的英文字母命名，如 main.css。
rel=”stylesheet” type=”text/css” 是固定写法不可修改。
<link>标签位置一般写在<head>标签之内。

.html文件
<head>
    <meta charset="UTF-8">
    <title>CSS样式</title>
    <link href="main.css" rel="stylesheet" type="text/css" />
</head>

<body>
<p>百度大厦位于北京海淀区上地信息产业基地北区7号地块。
    北至上地北路，<span>南至西北旺南路，</span>>东至上地村中路，西至内部1号路。
    用地北侧为联想研发及生产基地、<span>盈创动力和在建项目辉煌国际广场，</span>>
    南侧为美国安娜络、上地国际创业园，<span>东侧为数码科技广场、</span>神州数码、
    北方烽火和京蒙高科，西侧为上地6号写字楼群和著名的中关村软件园。
</p>
</body>

.css文件
span {
    color: blue;
}