13.体验CSS,CSS的引入方式,标签选择器

最新推荐文章于 2024-09-12 16:43:23 发布

Little_Green1

最新推荐文章于 2024-09-12 16:43:23 发布

阅读量487

点赞数 11

分类专栏：前端文章标签：前端 html css3

本文链接：https://blog.csdn.net/Little_Green1/article/details/141167698

版权

前端专栏收录该内容

18 篇文章 0 订阅

订阅专栏

一.体验CSS

CSS就是层叠样式表(Cascading Style Sheets,缩写CSS),是一种样式表语言,用来描述HTML文档的呈现,比如把字体改颜色,书写位置在<title>标签添加<style>双标签,在<style>标签里书写CSS代码,要写CSS代码就会涉及到选择器,这个下面会讲,请看演示

<!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>
        /* CSS代码 */
        /* 选择器{CSS属性} */
        /* 属性名和属性值成对出现 -> 键值对 */
        p {
            /* 文字颜色 */
            color: red;
            /* 字号 */
            font-size: 30px;
        }
    </style>
</head>
<body>
    <p>体验CSS</p>
</body>
</html>

为了看清楚我把整个骨架写进来了,CSS书写在<title>标签下,写了一个<style>双标签,然后在<style>标签内添加选择器,p就是个选择器,这个选择器名字跟HTML代码中<p>标签同名,这种选择器叫标签选择器(<p>标签是段落标签,前面好像忘记讲了),然后在标签后加大括号,在大括号里面写CSS代码.

这个是将文字颜色变为红色,然后将字号调大,默认字号好像是16px,记不清了.

二.CSS的三种引入方式

CSS引入可以通过上面的内容方法,叫内部样式表,将CSS代码写在<style>标签内,我们学习时就用这种方式.还有就是外部样式表,这个就是我们单独写一个CSS代码文件,比如:

p {
    color: red;
}

写完然后通过<link>标签引入,<link>标签是什么,以后会学到的,现在知道就行,后面学习我们都是用内部样式表

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- link 引入外部样式表; rel: 样式表 -->
    <!-- 外部样式表 -->
    <link rel="stylesheet" href="./2.这是CSS代码.css">
</head>

还有就是行内样式,就是直接在标签里加style属性,属性值写CSS代码,比如

<div style="color: green; font-size: 30px;">这是div</div>

div标签,文字颜色为绿色,字号30px,

三.标签选择器

选择器有很多种,有什么标签选择器,类选择器,id选择器......选择对象的方式,选择的范围不相同,标签选择器就是直接将标签名作为选择器,不好的点就是,不可以精细化选择,比如我一个<p>标签要加CSS样式,一个<p>标签不加,但是我只用标签选择器的话就全选了,但先不管.

<!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>
        /* 特点: 选中同名标签设置相同的样式,无法差异化同名标签的样式 */
        p {
            color: red;
        }
    </style>
</head>
<body>
    <p>这是p标签</p>
    <p>1111111</p>
    <p>222222</p>
</body>
</html>

在<body>标签中三个<p>标签都会被选中然后添加CSS样式.