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

前端入门视频笔记 CSS3（一） P61-92相关推荐

前端入门学习笔记（1）--html部分
这是在网上发表的第一篇文章,从来不喜欢在网上发表言论.文字和资源,是个名副其实的"伸手党",在"伸手白拿"的多年间,也曾想过要贡献些什么,但总是害怕自己分享出来 ...
【学习笔记】前端入门自学笔记（二）
前言本笔记是b站黑马程序员前端入门教程的听课笔记,主观性较强,初衷是与大家共同交流,一起进步. 目录前言表格标签 1.表格的主要作用 2.表格的基本语法 3.表头单元格标签 4.表格相关属性 5 ...
pink老师前端入门视频教程笔记(上）
HTML5+CSS3+移动端布局+flex布局rem布局响应式布局摹客蓝湖使用教程笔记基础班学习路线 HTML简介网页什么是网页什么是HTML 常用浏览器常用浏览器浏览器内核 ***Web ...
接收list对象_PyTorch入门视频笔记从数组、列表对象中创建Tensor
关注"AI机器学习与深度学习算法"公众号选择"星标"公众号,原创干货,第一时间送达从数组.列表对象创建 Numpy Array 数组和 Python List ...
一、前端入门学习笔记-标签（1）
1.首先下载编辑前端的工具 1 安装VSCode或者webstorm 2 安装中文语言包 3 尝试安装ayu主题 4 将一个目录作为项目目录大 5 创建一个新网页 6 安装live server 7 ...
前端入门学习笔记十九
<!DOCTYPE html> <html><head><meta charset = "UTF-8"/><title> ...
前端入门学习笔记—HTML
本文是我在入门时所作的笔记,希望能对初学者有些许帮助如有误,欢迎指出 HTML基础 1.web的组成结构(xhtml/xml) 表现(css) 行为(ecmascript) W3C制定结构与表现的标 ...
pytorch list转tensor_PyTorch入门视频笔记从数组、列表对象中创建Tensor
关注"AI机器学习与深度学习算法"公众号选择"星标"公众号,原创干货,第一时间送达从数组.列表对象创建 Numpy Array 数组和 Python List ...
01 移动的通信制式(点点入门,视频+笔记)
我是森森,近期想一点点的录制一套安卓的入门教程,这是第一节课,移动通信的制式. 点击打开课程视频这个G其实是generation的缩写,就是代的意思.3G就是第三代通信技术,4G就是第四代通信技术. ...
前端入门学习笔记六十五
<!DOCTYPE html> <html><head><meta charset="utf-8"> <title>CS ...

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