CSS3学习笔记

#sure#

已于 2022-02-15 20:00:38 修改

阅读量512

点赞数 2

分类专栏： web安全文章标签： css3 css 前端

于 2022-02-15 19:57:57 首次发布

本文链接：https://blog.csdn.net/m0_47402792/article/details/122937081

版权

web安全专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、CSS概述

CSS Cascading Style Sheet层叠样式表；
可以使网页美观，实现网页结构与表现的分离；
以HTML为基础，提供字体、颜色、背景的控制以及整体的排版，可以针对不同的浏览器设置不同的样式。

CSS3中3表示版本号，由于各浏览器厂商对CSS3各属性的支持程度不同，在标准未明确时，通过添加不同厂商的“私有前缀”进行区分。主流浏览器的私有前缀如下：

内核类型	相关浏览器	私有前缀
Trident	IE8/IE9/IE10	-ms
Webkit	Chrome/safari	-webkit
Gecko	Firefox	-moz
Blink	Opera	-o

二、CSS样式规则

选择器{属性1:属性值;属性2:属性值;} CSS样式作用的是HTML对象，大括号中是对对象设置的具体样式。属性与属性值采用的是“键值对”形式。eg: p{font-size:20px; color:red;}
CSS样式中选择器区分大小写，属性和值不区分大小写，一般的话，三者都采用小写
多个属性之间采用英文分号隔开，最后一个可以保留也可以不保留；
若属性值由多个单词组成，则需要添加引号。

三、CSS样式表

1. 行内式引入CSS样式表

在HTML标签内，使用style属性添加。
 css写在HTML中，没有实现结构和样式的分离。

<h2 style="font-size:20px;color:red;">对二级标题的字体大小和颜色进行控制</h2>

在这里插入图片描述

2.嵌入式引入CSS样式表

在HTML的<head></head>头部中使用<style></style>对选择器进行说明
实现结构与样式的半分离

//未使用css控制时
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>cssStudy</title>
</head>
<body>
<h2>内嵌式引入CSS样式</h2>
<p>使用style标记可定义CSS控制样式</p>
</body>
</html>

在这里插入图片描述

//引入之后，在HTML头部对使用的标签进行说明
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>cssStudy</title>
    <style>
        h2{text-align:center;}  /*对h2进行控制，让使用它的地方都居中*/
        P{color:darkred;text-decoration:underline;} /*控制p标签，使p具有红色下划线的属性*/
    </style>
</head>
<body>
<h2>内嵌式引入CSS样式</h2>
<p>使用style标记可定义CSS控制样式</p>
</body>
</html>

在这里插入图片描述

3.链入式引入CSS样式

将css样式单独写在HTML外部的.css文件中，在HTML中使用<link>标签进行引入
<link type="text/css"  rel="stylesheet" href="存放路径" >
type="text/css"表示为纯文本的css格式，rel="stylesheet"表示与HTML的关系为样式表

/*out.css*/
h2{text-align:center;}  /*对h2进行控制，让使用它的地方都居中*/
P{color:darkred;text-decoration:underline;} /*控制p标签，使p具有红色下划线的属性*/

/*HTML*/
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>cssStudy</title>
    <link type="text/css" rel="stylesheet" href="out.css">
</head>
<body>
<h2>外链式引入CSS样式</h2>
<p>将css样式单独写在HTML外部的.css文件中，在HTML中使用<link>标签进行引入</p>
</body>
</html>

在这里插入图片描述

四、CSS基础选择器

1.标记选择器

用HTML标记名称作为选择器，按标记名称分类，
为页面中某一类标记指定统一的CSS样式。

2.类选择器

与标记选择器搭配使用，可以自己定义类选择器，使用class调用，调用多个类选择器时使用空格隔开。

/*.red .green .font为自己定义的类选择器*/
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>cssStudy</title>
    <style>
        h2{font-family:"微软雅黑"}
        p{text-decoration:underline;}
        .red{color:red;}   
        .green{color:green;}
        .font{font-size:30px}
    </style>
</head>
<body>
    <h2 class="green">微软雅黑</h2>
    <p class="red">第一段落</p>
    <p class="green  font">第二段落</p>
</body>
</html>

在这里插入图片描述

3.id选择器

id选择器的定义方法与类选择器定义类似，不同在于"."变为"#",
使用id进行调用，在同一个页面中一个id选择器只能使用一次，不能使用空格调用多个id.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>cssStudy</title>
    <style>
        h2{font-family:"微软雅黑"}
        p{text-decoration:underline;}
        #red{color:red;}   /*.red .green .font为自己定义的类*/
        #green{color:green;}
        #font{font-size:30px}
    </style>
</head>
<body>
    <h2 id="green">微软雅黑</h2>
    <p id="red">第一段落</p>
    <p id="font">第二段落</p>
    <p id="red font">第三段落</p>  /*第三段落为错误案例*/
</body>
</html>

在这里插入图片描述

4.通配符选择器

使用 "*" 表示，对页面中所有标签起作用。不建议使用，会降低运行速度。

5.标签指定式选择器

标签.类名{属性1:属性值1;属性2:属性值2;}
只对特定的标签起作用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>cssStudy</title>
    <style>
        h2.font{font-family:"微软雅黑"}
        p.text{text-decoration:underline;color:rebeccapurple}
    </style>
</head>
<body>
    <h2 class="font">微软雅黑</h2>
    <p class="text">第一段落</p>
    <div class="font">没有起作用</div>
</body>
</html>

在这里插入图片描述

6.后代选择器

只对A标签中B标签进行控制，使用空格表示父子关系
父标签 子标签{属性1:属性值1;属性2:属性值2}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>cssStudy</title>
    <style>
        p strong{color:red;}
        strong{color:blue;}
    </style>
</head>
<body>
    <p>p标签中的<strong>strong中的内容为红色</strong></p>
    <strong>p标签嵌套之外的strong使用蓝色</strong>
</body>
</html>

在这里插入图片描述

7.并集选择器

当多个不同标签使用的css样式相同时，可以使用并集选择器
标签A,标签B,标签C{属性1:属性值1;属性2:属性值2;}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>cssStudy</title>
    <style>
        h2,h3,p{color:royalblue;font-size:20px;}
        h2,.one,.two{text-decoration:underline;}
    </style>
</head>
<body>
    <h2>咖啡</h2>
    <h3>牛奶</h3>
    <p class="one">榴莲</p>
    <p class="two">香蕉</p>
    <div>book</div>
</body>
</html>

在这里插入图片描述

五、字体样式属性

字体大小 font-size,一般使用的单位是px;
字体 font-family,使用多个字体时采用","隔开，中文字体放在英文字体前面，中文需要双引号引住，当有多个英文单词组成时，需要引住
字体粗细 font-weight,可以选择具体的数值，也可以使用粗blod、更粗bloder,更细lighter
字体风格 font-style,normal默认正常、italic斜体、oblique倾斜
综合设置字体 font font:font-style font-weight font-size/line-height font-family ,可以不写全，但是font-size和font-family必须保留。
word-wrap有normal:只在允许的段子点换行；break-word

@font-face用于定义服务器字体，通过@font-face属性，开发者可以在计算机未安装字体时访问在服务器上的字体。

@font-face{
		font-family:字体名称;
		src:字体路径;
		}
在其他类选择器中可以通过font-family:字体名称来调用@font-face定义的字体。

现在是2/15/19:46,外面已经全是放烟花的声音，
心已经不在这一块了，想看烟花，今晚有数不尽的烟花
需要一台照相机拍烟花，因为的手机已经拍不出肉眼看到的效果了
希望你爱的人和爱你的人都勇往直前。
最后，祝大家元宵节快乐！！！

#sure#

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
CSS3学习笔记

一、CSS概述二、CSS样式规则三、cSS样式表1.行内式引入CSS样式表2.嵌入式引入CSS样式表3.链入式引入CSS样式四、CSS基础选择器1.标记选择器2类选择器3.id选择器4.通配符选择器5.标签指定式选择器6.后代选择器7.并集选择器五、字体样式属性
复制链接

扫一扫