前端基础学习03-css学习-1

一、CSS简介

CSS主要用于美化网页，布局页面。

1.HTML的局限性

HTML主要做结构，显示元素内容，做成的网页非常丑

2.CSS 网页的美容师

  • CSS是层叠样式表(Cascading Style Sheets)的简称，有时也会称它为CSS样式表或级联样式表

  • CSS也是一种标签语言

  • 主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局和外观显示样式。

  • CSS美化HTML，布局网页

3.语法格式

所有样式都要写在<style>标签里，表示是样式表。<style>标签一般写在<head>标签最后

<head>
    <style>
        /* 选择器 {样式} */
        /* 给谁该样式 {改什么样式} */
        h2 { /* 选择器和花括号之间保留一个空格 */
            color: blue;  /* 冒号后保留一个空格 */
            font-size: 30px;
        }
    </style>
</head>
<body>
    <h2>阿巴阿巴阿巴</h2>
</body>

二、CSS基础选择器

1.CSS基础选择器的作用

根据不同需求把不同的标签选出来

h1 {
    color: blue;
    text-size: 25px;
}

以上代码执行了两件事：

1)"h1"选出了h1

2)"color: blue" 对选中的h1进行了处理

2.选择器分类

选择器分为基础选择器和复合选择器

基础选择器包括：

  • 标签选择器

  • 类选择器

  • id选择器

  • 通配符选择器

3.标签选择器

标签选择器就是用HTML标签作为选择器，对同一页面内的所有同种类标签指定统一的CSS样式。

语法：

<head>  
<style>
        h3 {
            color: green;
        }
        p {
            color: red;
        }
    </style>
</head>
<body>
    <h3>韭菜</h3>
    <p>股票</p>
    <h3>韭菜</h3>
    <p>股票</p>
    <h3>韭菜</h3>
    <p>股票</p>
</body>

  • 作用：可以将某一类标签全部选择出来

  • 优点：可以快速给同类型的标签统一设定CSS样式

  • 缺点：不能单独选择一个或多个特定标签，只能选择全部标签

4.类选择器

如果想要单独选择一个或多个特定标签，可以用类选择器。

4.1类选择器-单类名

语法：

<head>
    <style>
        .类名 {
            属性1: 属性值1;
            ...
        }
​
        .setred {
            color: red;
        }
    </style>
</head>
<body>
    <h2 class="setred">
        水果
    </h2>
    <p class="setred">
        apple
    </p>
    <p>
        banana
    </p>
</body>

类选择器在HTML中以class属性表示，在CSS中，类选择器以一个点"."显示。

注意：

  • 类选择器用”.“进行标识，后面跟着 我们自己命名的类名。

  • 不要使用纯数字、中文等命名，尽量使用英文字母

  • 要让别人一眼就知道这个类名的意义

  • 案例：

    <!DOCTYPE html>
<!-- 
--author: TSCCG
--date: 2021/4/11
 -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子案例</title>
    <style>
        .yellow {
            width: 150px;
            height: 150px;
            background-color: yellow;
        }
        .blue {
            width: 150px;
            height: 150px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="yellow"></div>
    <div class="blue"></div>
    <div class="yellow"></div>
</body>
</html>

4.2类选择器-多类名

语法：

<head>
    <style>
        .red {
            color: red;
        }
        .font20 {
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div class="red font20">红蛋</div>
</body>

  • 调用类名时，各个类名之间要用空格隔开。

  • 节省CSS代码，方便统一修改

5.id选择器

id选择器可以为标有特定id的HTML元素指定特定的样式

语法：

<head>
    <style>
        #green {
            color: green;
        }
    </style>
</head>
<body>
    <div id="green">西瓜</div>
</body>

<div id="green">黄瓜</div>

注意：

  • id选择器属性只能在每个HTML文档中调用一次，不允许多个元素调用同一个id选择器。

id选择器与类选择器的区别：

  1. 类选择器就像名字，可以被多个人使用

  2. id选择器就像人的身份证号码，独一无二，不可重复

  3. id选择器和类选择器的最大不同在于使用次数上

  4. 类选择器在修改样式中用的最多，id选择器一般用于页面唯一性的元素上，经常和JavaScript搭配使用。

6.通配符选择器

用 “*” 定义通配符选择器，表示选取页面中所有元素。

语法：

* {
    margin: 0;
    padding: 0;
}

  • 通配符不需要调用，它自动会给所有元素使用样式

  • 特殊情况下才使用

  • 例子：

    <head>
    <title>通配符选择器</title>
    <style>
        * {
            color: red;
            /*清除所有元素标签的内外边距*/
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <h3>Mine</h3>
    <p>Mine</p>
    <div>Stil mine !!!</div>
</body>

7.基础选择器总结

基础选择器作用特点使用情况语法
标签选择器 可以选出同类型的所有标签 不能单独选择一个或多个特定标签 较多 h2 { color: red;}
类选择器 能选出一个或多个标签 能根据需求选择 非常多 .h2 {color: red;}
id选择器 一次只能选择一个标签 id属性只能在每个html文档中出现一次 通常与js搭配 #h2 {color: red;}
通配符选择器 选择所有标签 只能选择全部，有时部分内容会多余 特殊情况是哟哦给你 * {color: red;}

  • 要根据不同场景使用不同的选择器。

  • 如果需要修改样式，那么类选择器的使用是最多的。

三、CSS字体属性

CSS font（字体）属性用于定义字体系列、大小、粗析、文字样式

1.字体系列

font-family属性定义是什么种类的文本，如微软雅黑、宋体

语法：

div {
    /* font-family: "黑体"; */
    font-family: "Microsoft yahei",Arial,"宋体" ;
}

  • 不同字体之间要用英文的逗号隔开

  • 如果有空格隔开的单词组成的字体，加引号

  • 尽量使用系统默认字体，保证在用户的浏览器中能正常显示

  • 最常见的一些字体：

    body {
    /* 设置多个字体的好处是增加兼容性*/
    font-familly: "Microsoft yahei",tahoma,arial,"Hiragino Sans GB";
}

2.字体大小

CSS用font-size属性定义字体大小

语法：

h2 {
    font-size: 19px;
}

  • 谷歌浏览器默认的字体大小是16px

  • 不同浏览器可能默认显示的字号大小不一样，设置时尽量给一个明确值

  • 可以给body指定整个页面的文字大小

  • 例子：

    <head>
    <title>字体大小</title>
    <style>
        body {
            font-size: 19px;
        }
        /* 标题比较特殊，需要特别指定大小*/
        h2 {
            font-size: 19px;
        }
    </style>
</head>
<body>
    <h2>Roguelike游戏</h2>
    <p>以撒的结合 忏悔</p>
    <p>暗黑地牢</p>
    <p>幸运房东</p>
</body>

3.字体粗细

CSS用font-weight属性设置文本字体的粗细

语法：

p {
    font-weight: bold;
}
属性值描述
normal 默认值（不加粗）
bold 定义粗体（加粗）
100~900 normal = 400, bold = 700

例子：

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体大小</title>
    <style>
        .bold {
            /* bold/700 表示字体加粗 */
            font-weight: bold;
        }
        h2 {
            /* normal/400 表示默认值，通常用于去除加粗效果 */
            font-weight: normal;
        }
    </style>
</head>
<body>
    <h2>Roguelike游戏</h2>
    <p class="bold">以撒的结合 忏悔</p>
    <p>暗黑地牢</p>
    <p>幸运房东</p>
</body>

4.文字样式

CSS用font-style属性设置文本的样式

语法：

p {
    font-style: normal;
}
属性值作用
normal 默认值，让浏览器显示标准的字体样式，多用于将斜体标签(em,i)改成正常样式
italic 让浏览器显示倾斜的字体样式，很少使用

例子：

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文字样式</title>
    <style>
        p {
            font-style: italic;
        }
        em {
            font-style: normal;
        }
    </style>
</head>
<body>
    <p>脉动一下</p>
    <em>马上回来</em>
</body>

5.复合属性

字体属性可以将以上几个文字样式综合来写，可以更节约代码:

body {
    font: font-sytle font-weight font-size/line-height font-family;
}

  • 使用font属性时，必须要按照上面的语法格式中的顺序书写，不可改顺序，且各个属性间用空格隔开。

  • 不用设置的属性可以省略（取默认值），但必须保留 font-size 和 font-family两个属性，不然font属性不起作用

  • 例子：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>复合属性</title>
    <style>
        /* p {
            font-style: italic;
            font-weight: 700;
            font-size: 20px;
            font-family: "Mircosoft yahei";
        } */
        p {
            font: italic 700 20px "Microsoft yahei";
        }
    </style>
</head>
<body>
    <p>赞美太阳！</p>
</body>
</html>

6.字体属性总结

属性表示注意点
font-style 字体样式 倾斜是italic，正常是normal
font-weight 字体粗细 加粗：bold/700 , 不加粗：normal/400
font-size 字号 通常用的单位是px像素
font-family 字体 工作中按照团队标准
font 字体连写 有顺序，不可更改；字号和字体必须同时出现

四、CSS文本属性

CSS文本属性可定义文本的外观，比如文本颜色、对齐文本、装饰文本、文本缩进、行间距等。

1.文本颜色

语法：

p {
    color: purple;
}
表示属性值
预定义的颜色值 red,green,pink,基佬紫purple等
十六进制 #FF0000,#FF6600
RGB代码 rgb(255,0,0)或rgb(100%,0%,0%)

  • 开发中最常用十六进制

  • 例子:

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本颜色</title>
    <style>
        p {
            color: purple;
        }
    </style>
</head>
<body>
    <p>dark♂</p>
</body>
</html>

2.文本对齐

text-align属性用于设置元素内文本内容的水平对齐方式

语法：

h2 {
    text-align: center;
}
属性值解释
left 左对齐（默认）
center 居中对齐
right 右对齐s

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>对齐文本</title>
    <style>
        h2 {
            text-align: center;
        }
    </style>
</head>
<body>
    <h2>Steam最新资讯</h2>
</body>
</html>

3.文本修饰

text-decoration属性规定添加到文本的修饰。可以给文本添加下划线、删除线、上划线等。

语法：

p {
    text-decoration: underline;
}
属性值描述
none 默认，没有装饰线（最常用）
underline 下划线，链接a自带下划线（常用）
line-throngh 删除线（不常用）
overline 上划线（几乎不用）

  • 重点记住如何添加下划线，如何删除下划线

  • 例子：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>装饰文本</title>
    <style>
        .underline {
            text-decoration: underline;
        }
        .through {
            text-decoration: line-through;
        }
        .overline {
            text-decoration: overline;
        }
        a {
            text-decoration: none;
        }
        body {
            color: purple;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <p class="underline">That's ♂ good ♂</p>
    <p class="through">That's ♂ good ♂</p>
    <p class="overline">That's ♂ good ♂</p>
    <a href="#">That's ♂ good ♂</a>
</body>
</html>

4.文本缩进

text-indent属性用来指定文本的第一行的缩进，通常是把段落的首行缩进。

语法：

p {
    text-indent: 20px;
}

通过设置该属性，所有元素的第一行都可以缩进一个给定的长度，该长度可以是负值。

p {
    text-indent: 2em;
}

em是一个相对单位，就是当前元素一个文字的大小，如果当前元素未设置大小，则会按照父元素的一个文字大小。

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本缩进</title>
    <style>
        p {
            /* 文本的第一行首行缩进多少距离 */
            /* text-indent: 20px; */
            /* em 当前元素一个文字的大小的距离 */
            text-indent: 2em;
        }
    </style>
</head>
<body>
    <p>湖边照影，柳外吟诗，两心不可遇。只负却、一肩书剑，灭尽衣香，泪浥红笺，又还前路。鱼书偶寄，银钗重拾，梨花庭院叮咛久，便多情、料也难留住。荒烟望断，重寻旧梦江南，梦阑已是今古。</p>
    <p>不是花中偏爱菊，此花开尽更无花。我热爱菊花，并非于它的迷人的美貌，而欣赏于它独特的韵味。让我也像菊花那样吧，为追寻一个目标，坚强而坚持地应对一路上的风风雨雨，直到取得胜利的那一刻，就能像菊花那样，在战胜了所有的曲折之后，傲然地在倒下的对手中微笑。<p>
    <p> 一路走来，身边来往了好多人，有些人来了就走，我们管他叫作过客。不管岁月如何流逝，无论季节如何更替，她永远陪在你身边，好似一颗青松，四季常青。</p>
</body>
</html>

5.行间距

line-height属性用于设置行间的距离（行高），可以控制文字行与行之间的距离。

语法：

p {
    line-height: 26px;
}

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>行间距</title>
    <style>
        p {
            line-height: 26px;
        }
    </style>
</head>
<body>
    <p>湖边照影，柳外吟诗，两心不可遇。只负却、一肩书剑，灭尽衣香，泪浥红笺，又还前路。鱼书偶寄，银钗重拾，梨花庭院叮咛久，便多情、料也难留住。荒烟望断，重寻旧梦江南，梦阑已是今古。</p>
    <p>不是花中偏爱菊，此花开尽更无花。我热爱菊花，并非于它的迷人的美貌，而欣赏于它独特的韵味。让我也像菊花那样吧，为追寻一个目标，坚强而坚持地应对一路上的风风雨雨，直到取得胜利的那一刻，就能像菊花那样，在战胜了所有的曲折之后，傲然地在倒下的对手中微笑。<p>
    <p> 一路走来，身边来往了好多人，有些人来了就走，我们管他叫作过客。不管岁月如何流逝，无论季节如何更替，她永远陪在你身边，好似一颗青松，四季常青。</p>
</body>
</html>

6.CSS文本属性总结

属性表示注意点
color 文本颜色 通常用十六进制表示
text-align 文本对齐 可以设定为文字水平的对齐方式
text-indent 文本缩进 通常用于段落首行缩进两个字的距离
text-decoration 文本修饰 下划线：underline；取消下划线：none;
line-height 行高 控制行与行之间的距离s

五、CSS的引入方式

1.三种样式表

按照CSS样式书写的位置，CSS样式表可以分为三大类：

  • 行内样式表（行内式）

  • 内部样式表（嵌入式）

  • 外部样式表（链接式）

2.内部样式表

写到html页面内部，将所有CSS代码抽取出来，单独放到一个<styel>标签中。

语法：

<style>
    div {
        color: purple;
        font-size: 26px;
    }
</style>

3.行内样式表

在元素标签内部的style属性中设定CSS样式，适合用来修改简单样式

语法：

<div styel="color: red; font-size: 26px;">
    安啦安啦啦啦啦
</div>

4.外部样式表

实际开发中用的最多，是额外创建一个CSS文件，将所有样式写入这个文件中，再在html文件中引入这个CSS文件使用。

引入外部样式表步骤：

  1. 新建一个后缀名是.css的样式文件，将所有CSS代码都放到这个文件里。

  2. 在html文件中，使用link标签引入这个文件。

    <link rel="stylesheet" href="css文件路径">
属性作用
rel 定义当前文档与被链接文档之间的关系，在这里需要指定为"stylesheet"，表示被链接的文档是一个样式表文件。
href 定义外部样式表的文件路径

5.CSS引入方式总结

样式表优点缺点使用情况控制范围
行内样式表 书写方便 结构样式混写 较少 控制一个标签
内部样式表 部分结构和样式相分离 没有彻底分离 较多 控制一个页面
外部样式表 完全实现结构与样式分离 需要引入 非常多 控制多个页面

六、综合案例

htmlcode:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>综合案例</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
        
    <h1>北方高温明日达鼎盛 京津冀多地地表温度将超60℃</h1>
    <div class="date">
        2019-07-03 16:31:47 来源: <a href="#">中国天气网</a>
        <input type="text" value="请输入查询条件" class="search"> <button>搜索</button>
    </div>
    <hr>
    <p>中国天气网讯 今天（3日），华北、黄淮多地出现高温天气，截至下午2点，北京、天津、郑州等地气温突破35℃。预报显示，今后三天（3-5日），这一带的高温天气将继续发酵，高温范围以及强度将在4日达到鼎盛，预计北京、天津、石家庄、济南等地明天的最高气温有望突破38℃，其中北京和石家庄的最高气温还有望创今年以来的新高。</p>
    
    <h4>气温41.4℃！地温66.5！北京强势迎七月首个高温日</h4>
    <p class="pic"> <img src="images/pic.jpeg"></p>
    <p>今天，华北、黄淮一带的高温持续发酵，截至今天下午2点，陕西北部、山西西南部、河北南部、北京、天津、山东西部、河南北部最高气温已普遍超过35℃。大城市中，北京、天津、郑州均迎来高温日。</p>
    <p>在阳光暴晒下，地表温度也逐渐走高。今天下午2点，华北黄淮大部地区的地表温度都在50℃以上，部分地区地表温度甚至超过60℃。其中，河北衡水地表温度高达68.3℃，天津站和北京站附近的地表温度分别高达66.6℃和66.5℃。</p>

    <h4>明日热度再升级！京津冀携手冲击38℃+</h4>
    <p>中国天气网气象分析师王伟跃介绍，明天（4日），华北、黄淮地区35℃以上的高温天气还将继续升级，并进入鼎盛阶段，高温强度和范围都将发展到最强。 明天，北京南部、天津大部、河北中部和南部、山东中部和西部、山西南部局地、河南北部、东北部分地区的最高气温都将达到或超过35℃。</p>
    <p>不过，专家提醒，济南被雨水天气完美绕开，因此未来一周，当地的高温还会天天上岗。在此提醒当地居民注意防暑降温，防范持续高温带来的各种不利影响。（文/张慧 数据支持/王伟跃 胡啸 审核/刘文静 张方丽）</p>

    <p class="footer">本文来源：中国天气网 责任编辑：刘京_NO5631</p>

</body>
</html>
csscode:
body {
    font: 16px/26px "Microsoft yahei";
}
h1 {
    text-align: center;
    font-weight: 400;
}
a {
    text-decoration: none;
}
.date {
    color: #888;
    font-size: 12px;
    text-align: center;
}
.search{
    color: #666;
    width: 170px;
}
p {
    text-indent: 2em;
}
.pic {
    text-align: center;
}
.footer {
    color: #888;
    font-size: 12px;
}

七、Chrome调试工具

1.打开调试工具

打开 Chrome 浏览器，按下 F12 键或者右击页面空白处检查

2.使用调试工具

  • Ctrl+滚轮可以放大开发者工具代码大小

  • 左边是HTML元素结构，右边是css样式

  • 右边 CSS 样式可以改动数值（左右箭头或者直接输入）和查看颜色。

  • Ctrl + 0 复原浏览器大小

  • 如果点击元素，发现右侧没有样式引入，极有可能是类名或者样式引入错误。

  • 如果有样式，但是样式前面有黄色叹号提示，则是样式属性书写错误。



posted @ 2021-04-12 16:01  TSCCG  阅读(84)  评论(0)  编辑  收藏  举报