HTML
前端三大要素：
html：木偶 css：化妆 javascript：动态展示
html四个公有属性：
id='one' class='two' style="根据css的语法进行设置" title='mydiv'
css
1.什么是css？ cascading style sheets_层叠样式表，用于修饰页面元素【人靠衣装马靠鞍，狗配铃铛跑的欢】
不能脱离html而单独存在
层叠
多个样式表修饰同一个元素
样式表(声明块)
{
color:#fff;
}
2.css语法
选择器 {
样式名:样式值;
样式名:样式值;
...
}
1.属性名和属性值之间使用:隔开
2.多对属性之间使用;隔开
3.最后一对属性可以不加分号： <div style="width:100px;height:100px;"></div> div*10
4.速记写法
简写形式：div：10px
盒子：内容区+内边距+边框+外边距margin 内边距:盒子边框与内容之间的距离 ; 外边距：盒子与盒子（元素与元素之间的距离）
padding-left:10px; padding-right:10px; padidng-top:10px; padding-bottom:10px;
-->简写：
padding:10px;//上下左右均为10px padding:10px 20px;//上下 左右
padding:10px 20px 30px;//上 左右 下 padding:10px 20px 30px 40px;//上 右 下 左
margin-left: --> margin:
border:1px solid red;
border-width:1px;
border-top-width border-left-width border-right-width border-bottom-width
border-style
border-color
5.注释 写法： /*注释内容* ； /作用：①解释说明②便于代码的维护和管理 ；注释不能嵌套使用
<!--注释
<!--inner-->
内容-->
/*
/*
*/
*/
6.css可读性【MDN】
空白字符 空格、tab字符和换行
.class {
color:'red';
font-size:18px;
}
7.选择器组
.one , .two , .three {
color:'red';
}
3.如何用
①html中引入css的方式：
<style>
选择器{
width:100px;
height:100px;
}
{
width:200px;
}
</style>
1.行内样式_style属性<div style="width:100px;height:100px;"></div>
内部style标签【内部样式表】
将样式添加到head标签中的style标签里
2.内联样式_在html中使用style标签
内联style属性【内联样式表】
在元素中添加style属性
<style>
选择器{
css语法
}
</style>
3.外部引入
建议使用：link标签
@import url()
外部link导入【外部样式表】
将样式单独抽离出来，写成一个css文件，在head标签中通过link标签导入
<link rel="stylesheet" href="">
创建一个以.css为后缀名的文件
link标签：优先解析css
不建议使用：@import url()：优先解析html
@import导入
将样式单独抽离出来，写成一个css文件，在style标签内通过@import导入路径
<style>
@import './test.css';
</style>
link和@import的区别
1) 所属范围
@import 是css的语法，只能导入样式
link是html的标签，不仅可以加载样式，还可以定义rel属性
rel="stylesheet"表示调用外部样式表
2) 加载顺序
页面加载的时候，link标签引入的css被同时加载
@import引入的css在页面加载完毕后再被加载
3) 兼容性
@import需要兼容IE5+
link标签，不存在兼容性问题
②引入方式的优先级：
行内样式>内联/外部引入
就近原则：哪一个样式更靠近元素，那一个样式的优先级更高
上课使用：内联样式更多
后期：外部link标签：实际开发
CSS选择器
- 基本选择器
标签选择器： 根据标签名称选择[一类]元素
<div></div> <span></span>
含义：根据指定的标签名，在当前文件中找到所有该名称的标签，设置属性
格式：
标签名 {
样式名:样式值
}
注意：
1. 标签选择器选中的是当前文件中所有的标签, 而不能单独选中某一个标签
2. 标签选择器无论标签藏得多深都能选中
3. 只要是HTML中的标签就可以作为标签选择器
id选择器：
通过id属性选择[一个]元素 #value
含义：根据指定的id找到对应的标签，设置属性
格式：
#id {
样式名:样式值
}
注意：
1. 在同一个文件中的id不可以重复
2. 使用id选择器时要在id前面加上#
3. id有一定的规范
id的名称只能由字母/数字/下划线
a-z 0-9 _
id名称不能以数字开头
id名称不能是HTML标签的名称
类选择器：
class .value
含义: 根据指定的类名找到对应的标签, 设置属性
格式:
.类名{
属性:值;
}
注意:
1. 在同一个文件中的class可以重复
2. 使用class选择器时要在class前面加上.
3. 类名的命名规范和id名称的命名规范一样
4. 在HTML中每个标签可以同时绑定多个类名
格式:
<div class="类名1 类名2 ..."></div>
错误的写法:
<p class="para1" class="para2"></p>
逗号选择器:
含义: 同时给多个选择器选中的标签设置属性
格式:
选择器1,选择器2{
样式名:样式值
}
注意:
1. 逗号选择器使用,来连接
2. 选择器可以使用 标签名称、id、class
组合选择器【了解】
含义: 给同时具备多个选择器的标签设置属性
格式:
选择器1选择器2{
样式名:样式值;
}
注意:
1. 选择器和选择器之间没有任何的连接符号
2. 选择器可以使用 标签名称、id、class
普遍选择器：
*：所有
*{}
div *{}
含义: 给当前文件所有的标签设置属性
格式:
* {
样式名:样式值;
}
-
层次选择器
子代选择器 含义: 找到指定标签中所有的直接子元素, 设置属性 格式: 标签名称1>标签名称2{ 样式名:样式值; } 先找到所有名称叫做"标签名称1"的元素, 然后在这个标签中查找所有第一代子元素名称叫做"标签名称2"的元素 注意: 1. 子元素选择器只会查找第一代子元素, 不会查找被嵌套的元素 2. 子元素选择器之间需要用 > 连接 后代选择器 含义: 找到指定标签的所有的后代元素, 设置属性 格式: 标签名称1 标签名称2{ 样式名:样式值; } 先找到所有名称叫做"标签名称1"的元素, 然后再在这个元素下面去查找所有名称叫做"标签名称2"的元素, 然后在设置属性 注意: 1. 后代选择器必须用空格隔开 2. 后代不仅仅是儿子, 也包括孙子/重孙子, 只要最终是放到指定标签中的都是后代 兄弟选择器 1. 相邻兄弟选择器 含义: 给指定选择器后面紧跟的那个选择器选中的标签设置属性 格式: 选择器1+选择器2{ 属性:值; } 注意: 1.相邻兄弟选择器必须通过+连接 2.相邻兄弟选择器只能选中紧跟其后的那个标签, 不能选中被隔开的标签 2. 通用兄弟选择器 含义: 给指定选择器后面的选择器选中的所有标签设置属性 格式: 选择器1~选择器2{ 属性:值; } 注意: 1.通用兄弟选择器必须用~连接 2.通用兄弟选择器选中的是指定选择器后面某个选择器选中的所有标签, 无论有没有被隔开都可以选中 后代选择器： >：选择当前元素的直接子元素 空格：选择当前元素的所有后代元素，包含孙代元素 兄弟选择器： +：选择当前元素之后的一个兄弟#one+div ～：选择当前元素之后的所有兄弟元素#one~div -
属性选择器
含义: 根据指定的属性名称找到对应的标签, 然后设置属性 格式: [attribute] 找到所有具有该属性名的标签, 设置属性 [attribute=value] 找到所有属性值为value的标签, 设置属性 [attribute^=value] 找到所有以value开头的标签, 无论有没有被-隔开 [attribute$=value] 找到所有以value结尾的标签 [attribute~=value] 找到拥有独立value的标签, value不可以和其他属性连接 [attribute*=value] 只要包含value就可以找到 最常见的应用场景, 用于区分input input[type=password] { } <input type="text"> <input type="password"> <input> 属性选择器： 根据元素的属性选择一类元素 [id]:选择当前页面中具有id属性的元素 [class='one']:选择当前页面中具有class属性并且属性值为one的元素 [class~='one']:选择当前页面中具有class属性，并且属性值之一为one的元素 [class^='o']:选择当前页面中具有class属性。并且属性值以o开头 [class$='o']:选择当前页面中具有class属性，并且属性值以o结尾 [class*='o']:选择当前页面中具有class属性，并且属性值中包含o字符的 多选择器： 使用逗号隔开多个选择器 div*5 p*3 div,p{ width:100px; height:100px; } #one,p,.two{ } div .outer1,div outer2{ } div .outer1,outer2{ } 组合选择器： 将多个选择器组合到一起使用 div#one:选择当前页面中所有div标签并且选择div标签汇总id为one的元素 div.one： -
伪类选择器
在选择器的后面使用: 用于添加特殊的效果 1. 与子元素相关 :first-child 选中同级别中的第一个标签 :last-child 选中同级别中的最后一个标签 :nth-child(n) 选中同级别中的第n个标签 数字 字符 odd even <p>段落一</p> <p>段落二</p> <p>段落三</p> <ul> <li> <p>段落四</p> <p>段落五</p> </li> </ul> 伪类选择器： :伪类名称 :first-child :last-child :nth-child(number/odd/even)odd基数 even偶数 和状态相关的： :hover:当鼠标悬停在某个元素上时 :avtive：当鼠标按下时的状态 :link：当当前元素未被点击过的状态 :visited：被访问过之后的状态 书写顺序： link-》visited--〉hover--》active div:first-child{} div :first-child{} p:first-child{} <div class='one'> <span></span> <p></p> <a href=""></a> </div> 2. 与状态相关 :link 未访问的链接 :hover 鼠标悬浮时的元素 :active 激活链接 :visited 已访问的链接 :focus 聚焦时 -
伪元素选择器
在选择器的后面使用:: 用于添加元素 ::after ::before 伪元素选择器： ::伪元素名称 <div>hello</div> ::first-letter:第一个字符 div::first-letter{ color:red } ::first-line：第一行 ::selection:被选择的文本 ::before content:'text'/url() ::after <div> <span>11.11</span> 32.21 </div>
选择器优先级【级联】：
根据特性值进行比较，特性值越大，优先级越高
1. !important
!important:不计入特性值，优先级最高,不建议使用
2. 特性值
style属性：1000
id选择器：100
类选择器/伪类选择器/属性选择器：10
元素选择器/伪元素选择器：1
div{//1
}
#one{//100
}
<div id='one'></div>
3. 代码顺序
如果样式具有相同的特性值，则看代码顺序，样式离元素近的优先级更高
特性值越大优先级越高，当特性值相同时，越靠下的优先级越高
设置样式
颜色单位：
1.关键字
2.rgb(r,g,b);0-255之间
3.rgba(r,g,b,a);a:0-1取值；0代表完全透明 1代表完全不透明
4.16进制的颜色值
#fff
#ccc
拾色器/取色器
尺寸单位：
1.px：绝对单位
2.em 相对单位
3.百分比 相对单位
<div style="width:100%">
<p></p>
</div>
c:/windows/Fonts/
控制面板-》外观--〉字体
字体样式：
斜体font-style
加粗font-weight
字体改变text-transform
字体font-family
文字大小font-size
文字排列方式text-align
文本修饰text-decoration:
缩进text-indent
阴影text-shadow
加载网络字体：
1.下载字体
2.声明字体
.t4{
font-family: 'myfont'
}
/*声明字体*/
@font-face{
font-family: 'myfont';
src:url('./fonts/Matamoras.otf');
}
3.使用字体
字体图标：fontawesome/iconfont
fontawesome:
<i class='fa fa-xxx'></i>
iconfont
<i class='iconfont xxx'></i>
index.html:
<link rel="stylesheet" href="outer.css">
<div class='one'></div>
outer.css:
.one{
background:red
}
扫一扫
4735
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
