HTML+CSSday02

最新推荐文章于 2024-07-22 22:37:58 发布

__Miracle__

最新推荐文章于 2024-07-22 22:37:58 发布

阅读量157

点赞数

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

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

CSS层叠样式表

CSS(Cascading Style Sheets) ，通常称为CSS样式表或层叠样式表（级联样式表）
作用：

主要用于设置 HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。
CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。

引入CSS

1、行内样式(内联样式)

概念：
称行内样式、行间样式.
是通过标签的style属性来设置元素的样式
其基本语法格式如下：

<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>

实际上任何HTML标签都拥有style属性，用来设置行内式。

<div style="width: 200px; height: 300px; border: red 3px solid">div</div>

注意：
- style其实就是标签的属性
- 样式属性和值中间是:
- 多组属性值之间用;隔开。
- 只能控制当前的标签和以及嵌套在其中的字标签，造成代码冗余
缺点：
- 没有实现样式和结构相分离

2、内部样式表（内嵌样式表）

概念：
称内嵌式
是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义
其基本语法格式如下

<head>
<style type="text/CSS">
    选择器（选择的标签） { 
      属性1: 属性值1;
      属性2: 属性值2; 
      属性3: 属性值3;
    }
</style>
</head>

举个栗子

 <style type="text/CSS">
        div {
            color: green;
            font-size: 120px;
            border: yellow 4px dashed;
        }
 </style>

注意：
- style标签一般位于head标签中，当然理论上他可以放在HTML文档的任何地方。
- type=“text/css” 在html5中可以省略。
- 只能控制当前的页面
缺点：
没有彻底分离

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h2 {
            color: red;
            font-size: 20px;
        }

        h4 {
            color: green;
        }

        p {
            color: blue;
        }
    </style>
</head>
<body>
<h2>忆江南 唐.白居易</h2>
<p>
    江南好,风景旧曾谙。<br/> 日出江花红胜火，
    <br/> 春来江水绿如蓝，
    <br/> 能不忆江南。
</p>

<h4>作者介绍</h4>
<p>白居易(772－846) ，字乐天,白居易(772－846) ，字乐天，
    太原(今属山西)人。唐德宗朝进士，元和三年(808)拜左拾遗，后贬江州(今属江西)司马，移忠州(今属四川)刺史，又为苏州(今属江苏)、同州(今属陕西大荔)刺史。晚居洛阳，自号醉吟先生、香山居士。其诗政治倾向鲜明，重讽喻，尚坦易，为中唐大家。也是早期词人中的佼佼者，所作对后世影响甚大。
</p>

<h4>注释</h4>
<p>(1)据《乐府杂录》，此词又名《谢秋娘》，系唐李德裕为亡姬谢秋娘作。又名《望江南》、 《梦江南》等。分单调、双调两体。单调二十七字，双凋五十四字，皆平韵。(2)谙(音安)：熟悉。(3)蓝：蓝草，其叶可制青绿染料。
</p>

<h4>品评</h4>
<p>
    此词写江南春色，首句“江南好”，以一个既浅切又圆活的“好”字，摄尽江南春色的种种佳处，而作者的赞颂之意与向往之情也尽寓其中。同时，唯因“好”之已甚，方能“忆”之不休，因此，此句又已暗逗结句“能不忆江南”，并与之相关阖。次句“风景旧曾谙”，点明江南风景之“好”，并非得之传闻，而是作者出牧杭州时的亲身体验与亲身感受。这就既落实了“好”字，又照应了“忆”字，不失为勾通一篇意脉的精彩笔墨。三、四两句对江南之“好”进
    　行形象化的演绎，突出渲染江花、江水红绿相映的明艳色彩，给人以光彩夺目的强烈印象。其中，既有同色间的相互烘托，又有异色间的相互映衬，充分显示了作者善于著色的技巧。篇末，以“能不忆江南”收束全词，既托出身在洛阳的作者对江南春色的无限赞叹与怀念，又造成一种悠远而又深长的韵味，把读者带入余情摇漾的境界中。</p>

</body>
</html>

3、外部样式表（外链式）

概念：
称链入式
是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中，
通过link标签将外部样式表文件链接到HTML文档中
其基本语法格式如下：

<head>
  <link rel="stylesheet" type="text/css" href="css文件路径">
</head>

link 是个单标签
link标签需要放在head头部标签中，并且指定link标签的三个属性

三种样式总结

CSS选择器（重点）

CSS基础选择器

标签选择器

概念：
标签选择器（元素选择器）是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。
语法：

标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

作用：
标签选择器可以把某一类标签全部选择出来比如所有的div标签和所有的 span标签
优点：
是能快速为页面中同类型的标签统一样式
缺点：
不能设计差异化样式

类选择器

类选择器使用“.”（英文点号）进行标识，后面紧跟类名.

语法：
- 类名选择器

.类名  {   
    属性1:属性值1; 
    属性2:属性值2; 
    属性3:属性值3;     
}

案例：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            color: green;
        }
        .mei {
            font-size: 100px;
        }

    </style>
</head>
<body>
<p class="mei">这个姑娘长得美</p>
<p>这个姑娘长得不太美</p>
</body>

优点：
- 可以为元素对象定义单独或相同的样式。可以选择一个或者多个标签
注意
- 类选择器使用“.”（英文点号）进行标识，后面紧跟类名(自定义，我们自己命名的)
- 长名称或词组可以使用中横线来为选择器命名。
- 不要纯数字、中文等命名，尽量使用英文字母来表示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/Demo02.css">
    <style>
        span {
            font-size: 140px;
        }
        .blue{
            color: blue;
        }
        .red{
            color: red;
        }
        .orange{
            color: orange;
        }
        .green{
            color: green;
        }
    </style>
</head>
<body>
<span class="blue">G</span>
<span class="red">o</span>
<span class="orange">o</span>
<span class="blue">g</span>
<span class="green">l</span>
<span class="red">e</span>

</body>
</html>

类选择器特殊用法- 多类名

注意：

各个类名中间用空格隔开。
多类名选择器在后期布局比较复杂的情况下，还是较多使用的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pink{
            font-size: 120px;
            color: green;
        }
        .font14{
            color: red;
        }

    </style>
</head>
<body>
<div class="pink fontWeight font20">亚瑟</div>
<div class="font20">刘备</div>
<div class="font14 pink">安其拉</div>
<div class="font14">貂蝉</div>
</body>
</html>

id选择器

id选择器使用#进行标识，后面紧跟id名

其基本语法格式如下：
- id选择器

#id名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

元素的id值是唯一的，只能对应于文档中某一个具体的元素。
用法基本和类选择器相同。
W3C标准规定，在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class。
类选择器（class）好比人的名字，是可以多次重复使用的，比如张伟王伟李伟李娜
id选择器好比人的身份证号码，全中国是唯一的，不得重复。只能使用一次。
类选择器我们在修改样式中，用的最多。
id选择器一般用于页面唯一性的元素身上，经常和我们后面学习的javascript 搭配使用

<!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">
    <style>
        /* 标签选择器 */
    span{
        font-size: 400px;
        font-weight: bold;
    }
    .blue{
        color:blue;
    }
    .red{
        color: red;
    }
    .red{
        color: red;
    }
    .orange{
        color: orange;
    }
    .green{
        color: green;
    }
    #bigger{
        font-size: 800px;
    }
    </style>
    <title>Document</title>
</head>
<body>
    <span id="bigger"class="blue">G</span>
    <span class="red">o</span>
    <span class="orange">o</span>
    <span class="blue">g</span>
    <span class="green">l</span>
    <span class="red">e</span>
</body>
</html>

在这里插入图片描述

通配符选择器

概念
通配符选择器用*号表示， * 就是选择所有的标签他是所有选择器中作用范围最广的，能匹配页面中所有的元素。
其基本语法格式如下：

* { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

    <style>
        *{
            font-size: 120px;
        }
    </style>
</head>
<body>
<div id="container">
    <div class="header">header</div>
    <div class="body">body</div>
    <div class="footer">footer</div>
</div>
<p>哈哈</p>

CSS字体样式属性

1.font字体

1.1 font-size:大小
我们文字大小以后，基本就用px了，其他单位很少使用
谷歌浏览器默认的文字大小为16px
但是不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小。一般给body指定整个页面文字的大小
1.2 font-family:字体
作用：
font-family属性用于设置哪一种字体。
网页中常用的字体有宋体、微软雅黑、黑体等，例如将网页中所有段落文本的字体设置为微软雅黑
可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体，如果都没有，则以我们电脑默认的字体为准。

p{ font-family:"微软雅黑";}
p{font-family: Arial,"Microsoft Yahei", "微软雅黑";}

1.3 font-weight:字体粗细
在html中如何将字体加粗我们可以用标签来实现
- 使用 b 和 strong 标签是文本加粗。
可以使用CSS 来实现，但是CSS 是没有语义的
1.4 font-style:字体风格
在html中如何将字体倾斜我们可以用标签来实现
- 字体倾斜除了用 i 和 em 标签，
可以使用CSS 来实现，但是CSS 是没有语义的

font-style属性用于定义字体风格，如设置斜体、倾斜或正常字体，其可用属性值如下：

平时我们很少给文字加斜体，反而喜欢给斜体标签（em，i）改为普通模式。

1.5 font:综合设置字体样式 (重点)
基本语法格式如下：

选择器 { font: font-style  font-weight  font-size/line-height  font-family;}

注意：

使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开。
其中不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用。

color:文本颜色

作用：
color属性用于定义文本的颜色，
其取值方式有如下3种：

我们实际工作中，用 16进制的写法是最多的，而且我们更喜欢简写方式比如 #f00 代表红色

__Miracle__

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML+CSSday02

CSS层叠样式表CSS(Cascading Style Sheets) ，通常称为CSS样式表或层叠样式表（级联样式表）作用：主要用于设置 HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。引入CSS1、行内样式(内联样式)概念：称行内样式、行间样式.是通过标签的style属性来设置元素的样式
复制链接

扫一扫

专栏目录