CSS基础篇

最新推荐文章于 2024-08-21 15:33:15 发布

陌听

最新推荐文章于 2024-08-21 15:33:15 发布

阅读量499

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/she_rryn/article/details/47132901

版权

CSS 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

本文介绍了CSS的基础知识，包括如何在HTML中插入CSS：1) 外部样式表，通过<link>标签引用独立的CSS文件；2) 嵌入式样式表，将样式放在<head>标签内的<style>元素中；3) 内联样式表，直接在HTML元素中使用style属性设置样式。此外，还讲解了CSS的语法，如声明分组、选择器分组和注释的使用。

摘要由CSDN通过智能技术生成

一、HTML中插入CSS

1、外部样式表

定义：将样式定义放在一个单独的文件中，需要时在文档中引用

步骤：

a、建立一个文件名为myStyle.css的样式表

h1, h2, h3{ color : blue;}

h1 { font-size: 18pt }

h2 { font-size: 16pt }

h3 { font-size: 14pt }

b、在<head>段使用<link>标记，可将一个外部样式表文件链接到文档中

<head>

</head>

2、嵌入式样式表

定义：用<style>元素将样式包含在网页内部，其作用仅限该网页

注：<style>必须出现在<head>段内

格式：

…样式定义…

</style>

优点：样式规则和标记元素在一个页面里，可以快速将两者拧在一起，方便测试

3、内联样式表

定义：标记中包含一个style属性，允许指定在标记显示时的样式

格式：

<h1 style="color: red">红色标题列</h1>

二、语法

1、声明分组

定义：在一个声明块内，可以有多个声明。每个声明必须以分号隔开

p {padding: 5px ; margin: 2px}

2、选择器分组

注：可以分组放在一起，避免重复，每个选择器必须以逗号隔开

h1, h2, h3 {padding : lem}

3、注释

/*注释在此*/
padding: 2px /*注释在此*/
/*

多行

注释

三、选择器

1、元素选择器

格式：元素 { 属性：值；}

p { color : red; }

2、类选择器

格式：.类名 {属性：值；}

.big { color : red; }

例如：

<span style="font-size:14px;"><!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<p class="big">This is some <em>text</em></p>
<p>This is some text</p>
<ul>
    <li class="big">List item</li>
    <li>List item</li>
    <li>List <em>item</em></li>
</ul>
</body>
</html></span>

.big { color : red;} //影响p和li

p.big{ color : red;} //只影响p

注：先要定义class属性值

3、id选择器

格式：#id名 {属性：值；}

#p {color :red ;}

div#p {color: red; }

4、包含选择器

格式：div p {}

<span style="font-size:14px;"><!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<strong><h1>Heading <em>here</em></h1>
<p>head <em>sit</em></p></strong>
</body>
</html></span>

p em {color: red; }是将<p>内的<em>元素格式化为红色，而<h1>内的<em>不会变

5、通配符选择器

格式：*{ }

* {color: red; }

用于选择所有元素

6、伪类选择器

a:link 是用在未访问的链接的选择器
a:visited 是用在以访问过的链接的选择器
a:hover 是用在鼠标光标放在其上的链接的选择器
a:active 是用在获得焦点（比如，被点击）的链接上的选择器

三、字体

1、设置字体名称（font-famile）

如：宋体，Times New Roman, Arial

2、设置字体倾斜程度（font-style）

属性值：normal(默认)、italic（倾斜）、oblique（更倾斜）

3、设置字重（font-weight）

normal(400)、bold(700)、900是最总的字体

4、设置字体大小(font-size)

常用值：12px、14px、16px

四、文本属性

1、横向对齐（text-align）

属性值：left right center

2、文本修饰（text-decoration）

属性值：none(默认)、underline(下划线)、overline(上划线)、line-through(删除线)、blink(闪烁)

3、行高（line-height）

五、字体颜色和背景

1、文本颜色（color）

2、背景颜色（background-color）

初值为透明

3、背景图片（background-image）

4、背景图片重复（background-repeat）

取值：repeat(默认)、no-repeat、repeat-x、repeat-y

六、字体设置及文本属性练习

1.用CSS实现下面古诗属性

<span style="font-size:14px;"><!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        div {
            text-align: center;
            color: blue;
        }
        h1 {
            color: red;
        }
        .p1 {
            color: green;
        }
        .p2 {
            background-color: orange;
        }
        .p3 {
            background-color: yellow;
            font-style: italic;
        }
        .p4 {
            background-color: pink;
        }
        .p5 {
            background-color: black;
            font-style: oblique;
        }
    </style>
</head>
<body>
<div>
<h1>古诗两首</h1>
    <p class="p1"><b>静夜思</b></p>
    <p class="p2">李白</p>
    <p class="p3">床上明月光</p>
    <p class="p4"><b>疑是地上霜</b></p>
    <p class="p5">举头望明月</p>
    <p class="p4"><b>低头思故乡</b></p>
    <p class="p1"><b>春晓</b></p>
    <p class="p2">孟浩然</p>
    <p  class="p3">春眠不觉晓</p>
    <p class="p4"><b>处处闻啼鸟</b></p>
    <p class="p3">夜来风雨声</p>
    <p class="p4"><b>花落知多少</b></p>
</div>
</body>
</html></span>

2、用CSS实现下列格式输出

<span style="font-size:14px;"><!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .a {
            color: red;
        }
        .b {
            color: purple;
        }
        .g {
            color: green;
        }
    </style>
</head>
<body>
<ul>
    <li class="a">脑袋</li>
    <li class="a">上肢</li>
    <ul>
        <li class="b">躯干</li>
        <li class="b">左臂</li>
        <ul>
            <li>左大臂</li>
            <li>左小臂</li>
            <li>左手</li>
            <ol>
                <li>大拇哥</li>
                <li>二拇哥</li>
                <li>三拇哥</li>
                <li>无名指</li>
                <li>小拇指</li>
            </ol>
        </ul>
    </ul>
    <ul>
        <li class="g">右臂</li>
        <ul>
            <li>右大臂</li>
            <li>右小臂</li>
            <li>右手</li>
            <ol>
                <li>大拇哥</li>
                <li>二拇哥</li>
                <li>三拇哥</li>
                <li>无名指</li>
                <li>小拇指</li>
            </ol>
        </ul>
    </ul>
</ul>
</body>
</html></span>