前端入门视频笔记 CSS3（一） P61-92

最新推荐文章于 2022-03-06 18:15:53 发布

wsyyyyyyy

最新推荐文章于 2022-03-06 18:15:53 发布

阅读量353

点赞数

分类专栏： H5C3

本文链接：https://blog.csdn.net/wsyyyyyyy/article/details/108355411

版权

H5C3 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

CCS（一）

CCS简介

02-简介

HTML的局限：针对网页元素的结构，只关注内容的语义。

CCS（Cascading Style Sheets）层叠样式表：

也可称为CSS样式表或级联样式表，也是一种标记语言；

用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片外形（宽高、边框、边距等）、版面布局和外观显示样式，从而美化HTML，布局页面；

实现结构（HTML）与样式（CCS）相分离。

03-CSS语法规范

CSS规则选择由两个部分组成：选择器、一条或多条声明；

<head>
    <style>
        h1 {color: red;
            font-size: 12px;
            ...}
    </style>
</head>

选择器：用于指定HTML标签，表示要给谁改样式；

{声明}：对指定的标签内容设置具体的样式，如字体颜色、大小等，以属性、属性值组成的键值来表示。

vscodoe快捷键 shift+alt+F 自动排列代码，加入空格等，排列成CSS宽松的格式。

CSS选择器分为：

基础选择器：包括标签选择器、类选择器、id选择器和通配符选择器
复合选择器

CSS基础选择器

06~11-标签、类、id、通配符选择器

（1）标签选择器：以HTML标签名作为选择器，为页面中某一类标签统一设置样式。

（2）类选择器：

样式点定义，结构类（class）调用；

即自定义一个类名称，在想改变样式的标签中调用这个类名称。

<head>
    <style>
        .red {color: red;}
    </style>
</head>

<body>
    <h1 class = "red size..."> ... </h1>
</body>

调用class时，可加入多个类选择器的名字，使该标签同时具有多个样式。

（3）id选择器

定义样式时：

#id名称 {属性：属性值}

样式#定义，结构id名调用；

与类选择器比较相似，但id选择器只能调用一次；

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

（4）通配符选择器

用 “ * ” 定义，选取页面中所有元素（标签），不需要调用。

CSS字体属性

12~17-设置字体、字号、粗细、样式的属性

（1）font-family属性定义文本使用哪种字体，如：

p { font-family: "Microsoft Yahei", Arial; }

设置了多种字体时，会按顺序来选择。

（2）font-size属性定义字号大小：

p { font-size: 20px; }

（3）font-weight属性定义字体粗细，属性值有：

normal：正常粗细，默认，值为400；

bold：粗体，值为700，功能与H5中的strong标签相同；

（当使用了strong标签或者标题标签h1..时，又可以将字体粗细设置为normal，让它不变粗）

bolder：特粗体；

lighter：细体；

number：直接写数字值100~900，不用写单位，提倡。

（4）font-style属性定义文字样式（斜体）：

p { font-style: ltalic; }

当使用了em（i）标签时，又可以将字体样式设置为normal，让它不倾斜。

（5）font复合属性综合定义字体样式：

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

其中属性值的顺序不能改变；

不需要设置的属性值可以省略，但是不能省略font-size和font-family，否则font属性将不起作用。

css文本属性

18~23-文本颜色、对齐、装饰、缩进、行间距

（1）color属性定义文本的颜色：

div { color: red; }

属性值有：

预定义的颜色值，如red、green、blue、pink等；

十六进制，如#FF0000，开发中最常用；

RGB代码，如rgb(255,0,0)。

（2）text-align属性设置文本内容的水平对齐方式；

属性值有left、center、right。

（3）text-decoration属性给文本添加下划线、删除线或上划线；

属性值：

none（默认，没有线，可以设置将链接标签a自带的下划线取消掉）；

underline（下划线）；

line-through（删除线）；

overline（上划线）。

（4）text-indent属性用来指定文本第一行的缩进，通常是将段落的首行缩进：

p { text-indent: 20px; }

p { text-indent: 2em; }

单位em是一个相对单位，1em就是当前元素一个文字的大小（font-size）。

（5）line-height属性用于设置行间的距离（字体的高度+行间距）；

属性值也是数字+单位px。

CSS的引入方式

根据CSS样式表书写的位置，即引入方式，CSS样式表可以分为三大类：

内部样式表（嵌入式）
行内样式表（行内式）
外部样式表（链接式）

24-内部样式表

写在HTML页面内部，并将CSS代码放在<style>标签中；

理论上<style>标签可以放在HTML文档的任何地方，但一般会放在<head>标签中，以便控制当前整个页面中的元素样式。

25-行内样式表

在元素标签内用style属性设置CSS样式，只控制当前标签的样式：

{div style = "color: red; font-size = 20px; " } ... {/div}

26-外部样式表

将样式单独写到CSS文件中，再把CSS文件引入到HTML文档中使用；

开发中最常用，实现结构与样式相分离。

步骤：

建立一个*.css文件，在里面只写样式；
在HTML文档的<head>标签中，使用<link>标签引入CSS文件：

其中<link>标签的属性：

ref 定义当前文档与被链接文档之间的关系，"stylesheet"表示被链接文档是一个样式表文件；

href 定义被链接文档的URL路径。

32-chrome调试工具

用来调试HTML和CSS：F12或单击右键点“检查”，打开调试工具；

Ctrl+滚轮放大或缩小代码；

Ctrl+0 复原浏览器大小；

小黑箭头可以选中浏览器和相应的代码部分；

在工具中更改代码只能调试效果，正式修改代还是要在编辑器中。

9.2/3

wsyyyyyyy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
前端入门视频笔记 CSS3（一） P61-92

CCS（一）02-CCS简介HTML的局限：针对网页元素的结构，只关注内容的语义。CCS（Cascading Style Sheets）层叠样式表：也可称为CSS样式表或级联样式表，也是一种标记语言；用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片外形（宽高、边框、边距等）、版面布局和外观显示样式，从而美化HTML，布局页面；实现结构（HTML）与样式（CCS）相分离。...
复制链接

扫一扫