黑马跟学CSS--day1笔记

目标

使用css基础选择器

设置字体样式

设置文本样式

三种引入方式

使用谷歌调试样式

作用

美化网页 布局页面

html只关注内容的语义 缺点：繁琐

由html专注做结构呈现 样式交给css

网页的美容师

name :css 样式表

标记语言

美化html

语法规范

选择器 和 声明的样式

在/head前面<style></style>

h1{color :red;}

font-size:12px;

选择器是html标签

键值对：属性:属性值；

代码风格

符合实际开发书写方式

样式格式

1.紧凑格式

2.展开格式（better）

样式大小写

小写

空格规范

冒号后面写空格

选择器和大括号之间保留空格

基础选择器

作用

选择器（选择符） 选择标签

选择器分类

基础选择器

由单个选择器组成

标签选择器

语法：

标签名 {

​ 属性一：属性值1；

​ 属性二：属性值2；

​ …

}

一类标签全部选出来

优点：快速

缺点：不能差异化设置

类选择器

语法

.类名{

​ 属性1：属性值1；

​ ···

}

·red{

​ color: red;

}结构需要用class属性来调用class类的意思

<div class='red'>变红色 </div>

口诀

样式点（.）定义

结构类（class）调用

一个或多个

开发最常用

注意：不能是点+标签名

长名词可以用-来分割

不要使用纯数字，中文命名

常用命名规范

多类名

给一个标签指定多个类名

各个类名中间用空格隔开

id选择器

语法

#id名 {

​ 属性1：属性值1；

​ ···

}

口诀：

样式#定义，结构id调用，只能调用一次，别人切勿选用

区别

id选择器和类选择器（class）区别：

！！使用次数

class 类比于名字 可以有多个

id好比身份证号码 不会重复

通配符选择器

语法

*

所有的标签全部修改

总结

标签选择器 不能差异化选择

类选择器. 根据需求选择

id选择器# 一次选一个 只能出现一次 和js搭配使用

通配符选择器* 选择所有标签 特殊情况使用

复合选择器

后代选择器

符号是空格

子代选择器

符号是>

并集选择器

符号是，

链接伪类选择器

a{}

a:hover

：focus选择器

input:focus

选择获得的光标

字体属性

font-family字体系列

font-family

各字体之间用英文状态下的逗号隔开

有空格隔开的多个单词组成的字体加引号

font-size字体大小

font-size

p {

​ font-size:20px;

}

px是像素

标题标签特殊，单独指定文字大小

font-weight字体粗细

font-weight

bold bolder lighter number normal 正常

数字后面不加单位

font-style文字样式

font-style

normal

italic

<em><i>倾斜标签

字体复合属性

综合来写 节约代码

body {

​ font: font-style font-weight font-size/line-height font-family

}

eg:

div {

​ font: italic 700 16px 'microsoft yahei';

}

必须按语法格式顺序书写 各个属性以空格隔开

不需要设置的可以省略（取默认值） 但必须保留font-size和font-family属性 否则不起作用

总结

font-size 字号 px像素 跟上单位

font-family 字体

font-weight 字体粗细 700和bold 不加粗是normal和400

font-style 字体样式 italic normal

font 字体连写 有顺序 字号和字体必须同时出现

文本属性

作用

文本的外观

颜色 对齐 缩进 行间距

color文本颜色

color:

16进制写法 #ff0000;

RGB代码格式rgb(255,0,0)

text-align对齐文本

text-align 设置水平对齐方式

center left(默认值) right

text-decoration装饰文本

text-decoration 给文本添加下划线、删除线、下划线

none 默认无

underline

overline

line-through

text-indent文本缩进

text-indent 段落的首行缩进

text-indent:20px;

em是一个相对单位，当前元素的1个文字大小来说

line-height行间距

line-height 设置行间距

行间距：上间距+文本高度+下间距

总结

color

text-align

text-indent 首行缩进 2em

text-decoration underline none

line-height

引入方式

样式表

1.行内样式表（行内式）

2.内部样式表（嵌入式）

3.外部样式表（链接式）

内部样式表

写在html内部<style>

可以方便控制整个页面的元素样式

代码结构清晰 没有完全分离

嵌入式

行内样式表

在标签内部写上style属性

<p style="color:pink;">

适合简单样式

外部样式表

适用于外部样式表

建好css文件

使用link标签进行引入

<link rel="stylesheet" href="css文件路径">