前端学习笔记（二）——CSS（1）
前端学习笔记（二）——CSS（1）
1、认识css
-
概念：
CSS(Cascading Style Sheets) ，通常称为CSS样式表或层叠样式表（级联样式表）
-
作用：
- 主要用于设置 HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。
- CSS以HTML为基础，提供如字体、颜色、背景的控制及整体排版等丰富的功能，同时可以针对不同的浏览器设置不同的样式。
2、引入css样式表
-
行内式
-
概念：通过标签的style来设置元素的样式
-
语法格式:
<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 标签名> -
例子：
<div style="color:green;font-size: 30px;"> 学习笔记 div>
-
-
内嵌式
-
概念是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义
-
语法格式
<head> <style type="text/CSS"> 选择器（选择的标签） { 属性1: 属性值1; 属性2: 属性值2; 属性3: 属性值3; } style> head> -
例子
<head> <style type="text/CSS"> div{ color: green; font-size：20px; } style> head> -
注意
- style标签一般位于head标签中，当然理论上他可以放在HTML文档的任何地方。
- type=“text/css” 在html5中可以省略。
-
-
外链式
-
概念
将所有的样式放在一个或多个以**.CSS**为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中
-
语法结构
-
注意
link是一个单标签
link标签需要放在head头部标签中，同时需要指定link标签的三个属性
属性 作用 示例 rel 定义当前文档与被链接文档之间的关系 在这里指定为“stylesheet”，表示被链接的文档是一个样式表文件。 type 定义所链接文档的类型 在这里指定为“text/CSS”，表示链接的外部文件为CSS样式表。 href 定义所链接外部样式表文件的URL 可以是相对路径，也可以是绝对路径。
-
3、选择器作用
- 选择标签
- 选择器分为基础选择器和复合选择器
4、css基础选择器
1、标签选择器
- 直接写标签，全部选中
- 语法结构：
标签名 {
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
}
2、类选择器
-
点定义
-
语法结构：
类名选择器
.studying { color: green; font-size：20px; }标签
<div class='studying'>div> -
案例
<html lang="en"> <head> <meta charset="UTF-8"> <title>Googletitle> <style> * { margin: 0; padding: 0; } .blue { color: blue; font-size: 100px; } .red { color: red; font-size: 100px; transform: rotate(45deg); } .orange { color: orange; font-size: 100px; } .green { color: green; font-size: 100px; } .red2 { color: red; font-size: 100px; display: inline-block; transform: rotate(-30deg); } style> head> <body> <span class="blue">Gspan> <span class="red">ospan> <span class="orange">ospan> <span class="blue">gspan> <span class="green">lspan> <span class="red2">espan> body> html>
3、类选择器 —多类名
-
目的
给标签指定多个类名，从而达到更多的选择目的。
-
格式
emmmmmm
4、id选择器
-
语法结构
id选择器：
#idName { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }标签：
-
注意：元素的id值是唯一的，只能对应于文档中某一个具体的元素。
5、通配选择器
概念：通配符选择器用*号表示， * 就是选择所有的标签 ，能匹配页面中所有的元素。
- 例子
* {
margin: 0; /* 定义外边距*/
padding: 0; /* 定义内边距*/
}
- 注意:会匹配页面所有的元素，降低页面响应速度
5、CSS字体样式属性
1、font字体
-
font-size：大小
-
作用：font-size属性用于设置字号
-
单位：可以使用相对长度单位，也可以使用绝对长度单位。
相对单位长度 说明 em 相对于当前对象内文本的字体尺寸 px 像素 绝对长度单位 说明 in 英寸 cm 厘米 mm 毫米 pt 点 -
语法格式
p { font-size:20px; } -
注意：
谷歌浏览器默认的文字大小为16px
不同浏览器默认显示的字号大小可能不一致
-
-
font-family：字体
-
作用：font-family属性用于设置具体字体。
-
代码格式：
p{ font-family:"微软雅黑"; } -
注意：可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体， 如果都没有，则以我们电脑默认的字体为准。
p{ font-family:"Microsoft Yahei", "微软雅黑"; } -
CSS Unicode字体
-
原因：在 CSS 中设置字体名称可以直接写中文。但是在文件编码（GB2312、UTF-8 等）不匹配时会产生乱码的错误。
-
解决方案：1、使用英文代替；2、使用 Unicode 编码来写字体名称
-
示例:
p{ font-family:"\5B8B\4F53", "\65B0\5B8B\4F53"; }
字体名称 英文名称 Unicode 编码 宋体 SimSun \5B8B\4F53 新宋体 NSimSun \65B0\5B8B\4F53 黑体 SimHei \9ED1\4F53 微软雅黑 Microsoft YaHei \5FAE\8F6F\96C5\9ED1 楷体_GB2312 KaiTi_GB2312 \6977\4F53_GB2312 隶书 LiSu \96B6\4E66 幼园 YouYuan \5E7C\5706 华文细黑 STXihei \534E\6587\7EC6\9ED1 细明体 MingLiU \7EC6\660E\4F53 新细明体 PMingLiU \65B0\7EC6\660E\4F53 -
-
-
font-weight：字体粗细
-
作用：除了使用b和strong标签来实现文本加粗，也可以使用css来实现
-
代码格式：
p{ font-family:"\5B8B\4F53", "\65B0\5B8B\4F53"; font-weight：800; } -
属性介绍：
属性值 描述 normal 默认值（不加粗） bold 定义粗体（加粗） 100~900 400 等同于 normal，而 700 等同于 bold
-
-
font-style：字体风格
-
作用：除了使用i和em标签来实现文本倾斜，也可以使用css来实现
-
代码格式：
p{ font-style:italic; } -
属性介绍：
属性 作用 normal 默认值，浏览器会显示标准的字体样式 font-style: normal; italic 浏览器会显示斜体的字体样式。
-
-
font：综合设置
- 语法格式：
选择器 { font: font-style font-weight font-size/line-height font-family; }- 注意
- 使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开。
- 其中不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用。
2、CSS外观属性
-
color:文本颜色
-
作用:color属性用于定义文本的颜色
-
语法格式
p { color: red; } -
取值
表示 属性值 预定义的颜色值 red，green，blue… 十六进制 #FF0000，#FF6600，#29D794 RGB代码 rgb(255,0,0)或rgb(100%,0%,0%) -
注意：实际开发中较为常用分为十六进制
-
-
text-align:文本水平对齐方式
-
作用：text-align属性用于设置文本内容的水平对齐，相当于html中的align对齐属性
-
语法格式
text-align: center; -
取值
属性值 描述 left 左对齐（默认值） right 右对齐 center 居中对齐 -
注意：是让盒子里面的内容水平居中， 而不是让盒子居中对齐
-
-
line-height:行间距
-
作用：line-height属性用于设置行间距，就是行与行之间的距离，即字符的垂直间距，一般称为行高。
-
语法格式
line-height: 24px; -
取值：line-height常用的属性值单位有三种，分别为像素px，相对值em和百分比%
-
-
text-indent:首行缩进
-
作用：text-indent属性用于设置首行文本的缩进
-
语法格式
p { /*行间距*/ line-height: 24px; /*首行缩进2个字符*/ text-indent: 2em; } -
取值
- 其属性值可为不同单位的数值。em表示字符宽度的倍数；或者使用百分比%，允许使用负值。
-
-
text-decoration 文本的装饰
-
作用：text-decoration 通常用于给链接修改装饰效果
-
语法格式：
<a href="#" style="text-decoration:none">CSS学习a> -
取值
属性值 描述 none 取消下划线 underline 定义文本下的一条线 overline 定义文本上的一条线。 line-through 定义穿过文本下的一条线。
-
6、快捷操作emmet语法
- 生成标签直接输入标签名点击tab键： 比如div然后tab 键，就可以生成
- 生成多个相同标签加上 * ： 比如div*3，可以快速生成3个div
- 生成父子级关系的标签，可以用 >： 比如 ul > li
- 生成兄弟关系的标签，用 + ： 比如 div+p
- 生成带有类名或者id名字的， 直接写 .demo 或者 #two tab 键
- 生成的div 类名是有顺序的， 可以用 自增符号 $
- emment语法