CSS基础入门：选择器、样式应用与布局,-优快云博客

本文链接：https://blog.youkuaiyun.com/cbs124758/article/details/135118921

CSS样式第1课

01CSS定义

层叠样式表(Cascading Style Sheets，缩写为CSS),是一种样式表语言，用来描述html文档的呈现。

02CSS基本使用

css样式一般在html的tittle标签下方
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>初识CSS</title>
    <style>
        p{
            color: red;
            font-size: 80px;
        }
        
    </style>
</head>
<body>
<p>段落css样式</p>
</body>
</html>

03 CSS引入方式

内部样式表：CSS 代码写在 style 标签里面
外部样式表：
1. CSS 代码写在单独的 CSS 文件中
2. 在 HTML 使用 link 标签引入
```
<link rel="stylesheet" href="./my.css">
```
行内样式：配合 JavaScript 使用,CSS 写在标签的 style 属性值里
```
<div style="color: red; font-size:20px;">这是 div 标签</div>
```

04 选择器

4.1 标签名选择器

4.1.1 作用

使用标签名作为选择器 → 选中同名标签设置相同的样式。

4.1.2用法

<style>
p {
color: red;
}
</style>

4.1.3缺点

标签选择器无法差异化同名标签的显示效果。

4.2类选择器

4.2.1 作用

根据类名查找标签类名，差异化设置标签的显示效果。

4.2.2 用法

定义类选择器 → .类名
使用类选择器 → 标签添加 class="类名“

4.2.3注意事项

类名自定义，不要用纯数字或中文，尽量用英文命名
一个类选择器可以供多个标签使用
一个标签可以使用多个类名，类名之间用空格隔开

4.2.4示例

<style>
/* 定义类选择器 */ .red {
color: red;
}
</style>
<!-- 使用类选择器 -->
<div class="red">这是 div 标签</div>

4.3id选择器

4.3.1作用

根据标签id查找标签，差异化设置标签的显示效果。

4.3.2场景

id 选择器一般配合 JavaScript 使用，很少用来设置 CSS 样式

4.3.3用法

定义 id 选择器 → #id名
使用 id 选择器 → 标签添加 id= “id名”

4.3.4规格

同一个 id 选择器在一个页面只能使用一次

4.3.4示例

<style>
/* 定义 id 选择器 */
#red {
color: red;
}
</style>
<!-- 使用 id 选择器 -->
<div id="red">这是 div 标签</div>

4.4通配符选择器

4.4.1作用

查找页面所有标签，设置相同样式。

4.4.2用法

通配符选择器： *，不需要调用，浏览器自动查找页面所有标签，设置相同的样式

4.4.3场景

通配符选择器可以用于清除标签的默认样式，例如：标签默认的外边距、内边距

4.4.4示例

        *{
            margin: 0;
            padding: 0;
            width: 800px;
            height: 400px;
        }

05使用选择器画盒子

<!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>
        .red{
            width: 100px;
            height: 100px;
            background-color: red;
            text-align: center;
        }
        .blue{
            width: 200px;
            height: 200px;
            background-color: blue;
            text-align:center;
            
        }
    </style>
</head>
<body>
    <div class="red">红色div盒子</div>
    <div class="blue">蓝色div盒子</div>
</body>
</html>

06字体

06.1字体大小

        .fontWeight400 {
            font-weight: normal;
        }

06.2字体粗细

        .fontWeight400 {
            font-weight: normal;
        }

        .fontWeight700 {
            font-weight: bold;
        }

06.3字体样式

        .fontWeight400 {
            font-weight: normal;
        }

        .fontWeight700 {
            font-weight: bold;
        }

06.4行高

        .lineHegith1 {
            font-size: 20px;
            /* 当前标签font-size属性值的倍数） */
            line-height: 1;
        }

06.5行高-垂直居中

        .div {
            height: 100px;
            width: 200px;
            background-color: blue;
            /* 行高属性值等于盒子高度属性值 */
            line-height: 100px;
            text-align: center;
        }

06.6字体

        .fontFamily {
            font-size: 20px;
            /* font-family属性值可以书写多个字体名，各个字体名用逗号隔开，执行顺序是从左向右依次查找网页开发建议使用无衬线字体*/
            font-family: 楷体, 'Times New Roman', Times, serif，Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, 	     "\5B8B\4F53", sans-serif;
        }

06.7font复合属性

        .div1 {
            /* 是否倾斜 是否加粗 字号/行高 字体（必须按顺序书写） */
            /* 属性的简写方式，一个属性对应多个值的写法，各个属性值之间用空格隔开 */

            font: italic 700 100px/2 楷体
        }

06.8文本缩进

        .textIndent {
            font-size: 20px;
            /* 字体缩进 */
            /* 数字 + em（推荐：1em = 当前标签的字号大小） */
            text-indent: 2em;
        }

06.9 文本对齐方式

        .textAlign {
            width: 200px;
            height: 200px;
            /* 垂直居中 */
            line-height: 200px;
            /* 水平居中 */
            text-align: center;
            background-color: blue;
        }

06.10 文本修饰线

        .textDecoration1 {
            /* 无修饰 */
            text-decoration: none;
        }

        .textDecoration2 {
            /* 下划线 */
            text-decoration: underline;
        }

        .textDecoration3 {
            /* 删除线 */
            text-decoration: line-through;
        }

        .textDecoration4 {
            /* 上划线 */
            text-decoration: overline;
        }

06.11 文字颜色

        .fontColor {
            /* color: 颜色英文单词，例如：red; */
            /* color:rgb(r,g,b),红绿蓝三原色，取值为0-255，例如：rgb(0,255,0); */
            /* color:rgba(r,g,b,a),a标识透明度，取值为0-1，例如：rgba(0,0,0,0.8); */
            /* color:十六进度值表示，例如：#0000ff; */
            color: #00f;
        }

07综合练习1-新闻详情

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新闻详情</title>
    <style>
        h1{
            font-size: 30px;
            text-align: center;
            color: #333333;
            font-weight: 400;

        }
        div{
            font-size: 14px;
            color: #999;
        }
        p{
            font-size: 18px;
            text-indent: 2em;
        }
        .pic{
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>在希望的田野上 | 湖北秋收开镰 各地多举措保增产增收</h1>
    <div>来源：央视网 | 2222年12月12日 12:12:12</div>
    <p><strong>央视网消息：</strong>眼下，湖北省秋收开镰已有一周多的时间。水稻收割已经超过四成，玉米收割七成。湖北省通过大力推广新品种水稻，建设高标准农田等一系列措施，为秋粮稳产提供有力支撑。</p>
    <p>中稻占据了湖北全年粮食产量的一半以上。在湖北的主产区荆门市，370万亩中稻已经收割四成以上。</p>
    <div class="pic">
        <img src="./../images/5.jpg" alt="">
    </div>
    <p>王化林说的新品种，是湖北省研发的杂交水稻“华夏香丝”，不仅产量高，还具有抗病、抗倒、抗高温的特性。在荆门漳河镇的一工程示范田内，像“华夏香丝”这样抗旱节水的品种还有20多个，这些水稻新品将在荆门全面推广，确保来年增产增收。</p>
    <p>
        此外，湖北还大力推进高标准农田建设。截至今年6月，已建成3980万亩高标准农田。目前，湖北全省仍有1800多万亩中稻正在有序收割中，预计10月中旬收割完毕。
    </p>

</body>
</html>

08综合练习2-CSS简介

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS简介</title>
    <style>
        h1{
            color: #333;
        }
        p{
            text-indent: 2em;
            font-size: 14px;
            color: #444;
            line-height: 30px;
        }
        li{
            font-size: 14px;
            color: #444;
            line-height: 30px;
        }
    </style>
</head>
<body>
    <h1>CSS（层叠样式表）</h1>
    <p>层叠样式表 (Cascading Style Sheets，缩写为 CSS），是一种 <a href="#">样式表</a> 语言，用来描述 HTML 或 XML（包括如 SVG、MathML、XHTML 之类的 XML 分支语言）文档的呈现。CSS 描述了在屏幕、纸质、音频等其它媒体上的元素应该如何被渲染的问题。</p>
    <p><strong>CSS 是开放网络的核心语言之一</strong>，由 W3C 规范 实现跨浏览器的标准化。CSS 节省了大量的工作。 样式可以通过定义保存在外部.css 文件中，同时控制多个网页的布局，这意味着开发者不必经历在所有网页上编辑布局的麻烦。CSS 被分为不同等级：CSS1 现已废弃， CSS2.1 是推荐标准， CSS3 分成多个小模块且正在标准化中。</p>
    <ul>
        <li>CSS 介绍 如果你是 Web 开发的新手，请务必阅读我们的 CSS 基础 文章以学习 CSS 的含义和用法。</li>
        <li>CSS 教程 我们的 CSS 学习区 包含了丰富的教程，它们覆盖了全部基础知识，能使你在 CSS 之路上从初出茅庐到游刃有余。</li>
        <li>CSS 参考 针对资深 Web 开发者的 <a href="#">详细参考手册</a>，描述了 CSS 的各个属性与概念。</li>
    </ul>
</body>
</html>