引言: 我所教授的前端知识适用于纯小白,零基础。未来发展方向是前端领域,需要系统学习的人,从零到1的人 转载需备注地址---- 我是(我想静静)一个要把代码写出艺术感的人! 写代码的男人很帅气!
说起HTML,是一个超文本标记语言,他只关注内容的语义,css的出现,拯救了混乱的HTML,Css 最大的贡献就是,让HTML从样式中脱离苦海,实现了HTML专注去做结构呈现
1、CSS初识 Css全称CasCading Style Sheets 通常称为Css 样式表或层叠样式表(级联样式表),就是网页的美容师,给标签设置样式,外观显示样式。
## 正课开始:
## 1、引入css 样式表 (书写位置)
css可以写到那个位置?是不是一定要写到html文件里面呢? 答案当然是 否了,
```
**重点 **:样式书写的三种格式 行内, 内部样式表 , 外链
```
## 1、1 行内样式 也叫(内联样式 少用)
通过标签的style 属性来设置元素的样式
<标签名 style="属性1:属性值;属性2:属性值2;"></标签名>
<div style="color:red;font-size: 12px">前端任重而道远</div>
## 2、1 内部样式表 (内嵌样式表 常用)
内嵌样式是将css代码集中写在HTML 文档中的head 头部标签中,并且用style 标签定义
<style type="text/css">
选择器{
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
}
</style>
<style type="text/css">
div{
color: piink;
font-size: 12px;
}
</style>
<body>
<div>加班中</div>
<div>加班中</div>
<div>加班中</div>
</body>
## 3、1 外部样式表(外链式   实际开发用)
链入是将所有的样式放在一个或多个以css为扩展名的外部样式表中,通过link 标签将外部样式表文件连接到html文档中
href 进行链入 文件名是 day.css 文件名以css 结尾
htef : 定义所连接外部样式表的文件url
type : 定义所连接文档的类型
rel :定义当前文档与被连接文档之间的关系定义为stylesheet 样式表
<link rel="stylesheet" type="text/css" href="day.css">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="">
</head>
样式表总结: 优点 缺点 使用情况
行内样式表 书写方便权重高 没有实现样式和结构分离 较少
内部样式表 部分结构和样式相分离 没有彻底分离 较多
外部样式表 完全实现结构和样式相分离 需要引入 最多
## 样式书写一定要展开格式 用这样
.style{
display:block;
width:50px;
}
## CSS 选择器 重点 重点 重点!!!
css 选择器 干啥的? 选择标签用的,可以把我们想要的标签选择出来 必须有记住
CSS 基础选择器
1、标签选择器
2、类选择器 类选择器使用:不要纯数字或者数字开头,中文等命名,尽量使用英文字母来表示如果比较复杂使用- 的化尽量使用中- 杠 不要用下_ 有容有兼容问题
3、多类名选择器
4、id选择器
5、id 选择器和类选择器
6、通配符选择器
1、1 标签选择器 (元素选择器)
标签选择器是指用HTML 标签名作为选择器,按标签名称分类
***优点快速为页面中同类型的标签统一样式,同时缺点也是不能设计差异化样式
div{
color: green;
font-size: 14px;
}
p{
color: orange;
font-size: 20px;
}
```
<div>前端加班中</div>
<div>前端加班中</div>
<div>前端加班中</div>
<p>前端加班中</p>
<p>前端加班中</p>
<p>前端加班中</p>
```
1、2 类选择 实际开发中用的最多
调用类选择器 给第一个div 谁调用谁生效,不调用不生效,class 是类 在style 里面 加 . 点 开始
特点:多个标签可以调用同一个类选择器 ,但是谨记一个标签只能有一个 class ,但是一个标签可以同时调用多个类选择器
```
<style type="text/css">
.box{
color: green;
font-size: 14px;
}
.p{
background:pink;
}
.sty{
width:400px;
heigth:300px;
}
</style>
<div class="box">加班写代码</div>
<div class="box p sty">加班写代码</div> 调用多个类选择器
<div>加班写代码</div>
```
## 1、3 id 选择器使用 # 进行标识,后面紧跟id名其基本语法格式如下
id 选择器
特点 1、一个id 选择器只能被调用一次,多次使用不符合w3c 规范 js调用会出错
特点 2、 一个标签不能同时调用多个id 选择器
特点 3、 一个标签可以同时调用类选择器和id 选择器
#box{
color: orange;z-index:
font-size:100px;
}
.box2{
width:300px;
height:400px;
}
<body>
<div id="box">嘿嘿</div>
<div id="box" class="" >嘿嘿</div>
</body>
## 1.4通配符选择器
通配符选择器 页面上所有的选择器,使用较少
*{
color: red;
font-size: 100px;
}
<div>01</div>
<h2>02</h2>
<p>03</p>
## 2. CSS 字体样式属性
属性:用于设置字号,该属性的值可以使用相对长度单位,也可以使用绝对长度单位,相对长度单位比较常用。推荐使用相熟单位px
相对长度单位 说明
em 相对于当前对象内文本的字体尺寸 1em = 16像素
px 像素最常用,推荐使用
.box{
font-size:40px;
font-family: "宋体";
font-weight: 400;
font-style:normal; 正常
line-height:10px; 使用最多的是像素 10px的百分之200% 是20
color:文本颜色
}
font-siez: 设置字体大小
font-family : 设置字体
现在网页中普遍使用14px 尽量使用偶数数字 字号
font-weight:字体粗细 normal正常,bold加粗 bolder 更粗 或者使用数字 100-900 100-400 是正常, 500 以后是加粗,实际开发700
font-style: 字体风格 normal 正常 italic: 浏览器会显示斜体的字体样式
oblique:浏览器会显示倾斜的字体样式
line-height: 控制行与行之间的距离 单位使用 px
![](https://user-gold-cdn.xitu.io/2018/12/16/167b6b9eb577064d?w=1200&h=666&f=png&s=110403)
## 3、Css 外观属性
1、颜色名称
2、十六进制从 0-9 从 a-f
.box{
color:pink;
text-align: left;
text-indent: 2em; 1个em是1个汉子的大小 首行缩进
text-decoration: none; 一般在a标签时候使用a 标签带下划线
}
```
<div class="box"> Css 外观属性 </div>
```
## text-align: 文本水平对齐方式有三个 默认值是left , center right
1、管理内容的水平对齐方式
2、 text-indent: 文本首行缩进一般使用em
3、text-decoration: none; 默认值是none underline定义文本下一条线
## Css 复合选择器
复合选择器是由两个或者多个基础选择器,通过不同的方式组合而成的,目的是为了可以选择更准确更精细的目标元素标签
1、交集选择器由两个选择器构成,找到的标签必须满足,既有标签一的特点,也有标签二的特点。
交集选择器既又的关系,尽可能的少使用
```
.box{
color: red;
font-size:100px;
}
div.box{
text-decoration: underline;
}
```
<div class="box">交集选择器1</div>
<div>交集选择器2</div>
<p class="box">交集选择器2</p>
2、 后代选又称为包含选择器,用来选择元素或元素组的后代,写法把外层标签写在前面,内层标签写在后面,中间用空格分隔开,当标签发生嵌套时,内层标签就成为外层标签的后代
发生前提:包含关系
特点:1父元素在前,子元素在后
```
div p span{
color: pink;
font-size:20px;
}
先找div 然后 p 然后 span span发生了改变 后代选择器
<div> div 是父元素
<p>p 是子元素
<span>span是p的子元素</span>
</p>
</div>
```
## 3、开发者工具使用,代码出现问题第一时间找浏览器
使用浏览器:Chrome F12 Mac电脑我的打开方式是com + shift + c
com + 加号 可以放大代码
com + 0 恢复浏览器大小