day04
目录
前言
第四天学习开始
一、复习
- html语法
- 单标签
- .双标签
- html属性语法
- .必要属性
- 非必要属性
- html注释
- html基础结构（html模板）
- html标签
- h1~h6
- p
- br
- a
- span,i,b,mark
- img
- ul,ol,li
- table,tr,td,thead,tbody,th
- form
- input,tpye类型
- select,option
二、CSS
1.CSS概念
- css层叠样式表，Cascading Style Sheet，是一种样式语言，用来描述（渲染）html标签。
- 历史
- 1996年css第一个版本,css1.0
- 1998年css第二版本,css2.0
- 2005年css第三个版本，css3.0 【未完】
2.css引用方法
css有四个引用方法，其中三个常用，一个导入方法不太常用（需要再用）
- 内联样式
- 是写在标签内部的，使用标签的style属性
- 属性值写在style属性的引号里，每一个样式结束后加分号
- 内联样式，显得非常乱，复用性很差，优先级比较高
- 内部样式
- 写在head标签中，创建的style标签里，写css语法渲染样式
- 内部样式，复用性不高，只能渲染当前页面的标签
- 外部样式
- .需要单独创建一个css文件，文件的后缀名是.css
- .可以通过任意一个html文件，在该文件的head，中创建一个link标签。link有一个href属性，把css文件当做路径传到href属性里，在该页面中使用
- 复用性高，多页面可以使用一套相同的css样式。多次请求对服务器造成压力
<!-- 内联样式 -->
<h1 style="color: red;">一段文字改颜色</h1>
<style>
/* 内部样式 */
div {
width: 200px;
height: 300px;
border: 5px solid black;
background-color: yellow;
}
</style>
<!-- 外部样式 -->
<link rel="stylesheet" href="./1.css">3.CSS语法
css语法有几个构成部分：
- 选择器:寻找到html中需要渲染的元素
- 声明块：用于给这个元素渲染样式的一条条属性集合，所有的一条条声明，被一个大花括号包裹
- 在声明块中的每一条声明就是一个样式描述 属性名:属性值;
二、css选择器
1.通用选择器
- 所有元素使用声明块中的同一个样式，有缺陷
2.标签选择器
- 标签选择器通过标签的名字选取元素，所有相同的标签都会使用同一个样式
/* 标签选择器，选中相同标签名的元素 */
p {
color: red;
}3.类选择器【重点】
- 在标签中加入class属性，给class值，在css中使用 .类 （别忘了点.)。所有拥有相同类名的元素都可以使用同一样式。
- 类属性可以拥有多个值，也就是多个类名同事存在在一个class属性中。用空格分开，拥有多个class属性值的元 素，可以拥有多个class样式。
.r {
color: green;
}
.bgy {
background-color: yellow;
}
<p class="r bgy">我是p但我需要绿色!!!!!</p>4.id选择器
- id选择器是在标签中加入一个id属性，使用id属性的属性值当做选择器。那么这个选择器是遵循id 的规则的.
- id在一个页面中，同一个id值只能出现一次
- id属性多在js中快速寻找元素中使用较多，css直接使用id选择器极少
- id属性值前一定要加#id值在css中当做选择器使用
/* id选择器*/
#mydiv {
background-color: aqua;
}5.群组选择器
- 用逗号链接多个选择器，让着多个选择器使用相同的样式。
/*群组选择器*/
table,th,td {
border: 1px solid black;
}
- 误区：
- 群组选择器是不是只能用标签选择器链接（不！）
- 只要使用了群组选择器，是不是就只能用群组，单独的渲染一个元素就不行了（不！）
6.后代选择器
- 祖先元素的选择器 空格 链接 后代元素选择器，代表某祖先元素的后代元素
- 子代选择器，比后代更精准，只能是父子元素之间的关系，用>链接父子选择器
/* 后代选择器 */
.baba img {
width: 200px;
}
/* 子代选择器 */
.erzi>img {
width: 200px;
}7.兄弟选择器
- 使用~链接哥哥选择器和弟弟选择器，该选择器只选弟弟不选哥哥，~指后面所有的弟弟
- 使用+链接哥哥选择器和弟弟选择器，该选择器只选择紧紧挨着哥哥的弟弟，+指一个弟弟元素
/* ~兄弟（只指弟弟） */
/* li找弟弟li */
li~li {
font-size: 12px;
}
/* 相邻兄弟选择器（只选紧紧挨着自己的弟弟） */
li+li {
color: red;
}8.伪类【重点】
css
伪类是添加到
“
选择器上的
”
关键字，制定要选择的元素的
“
特殊状态
”
- :hover 鼠标悬停伪类，就是鼠标停留在元素上发生的状态变化
- :active 鼠标激活元素伪类，就是鼠标按住不松手，在元素上发生的变化
- a链接a标签有三种特殊的状态：
- :link未激活状态（包装没打开状态）——默认蓝色
- :active正在激活（正在打开包装:active）—— 默认红色
- :visited已经激活状态（包装已经打开过了）—— 默认紫色
- 4.伪类遵循的LVHA的先后顺序： :link - :visited - :hover - :active--爱恨法则
- :focus 获取焦点，多用于表单元素如input输入框，当鼠标的光标在输入框内容，相当于获取了鼠标的焦点，从事可以通过该伪类，改变其样式
/* 1.先确定是哪个元素被发生状态的变化，换句话说哪个元素被触发悬停—— h3
2.要改的是谁 —— ul li
3.看发生状态的元素和要改元素的关系，再把他们结成一个选择器
*/
h3:hover+ul li {
color: red;
}
/* 激活状态 */
p:active {
color: red;
}
/*
a标签有三种特殊的状态
未激活状态（包装没打开状态:link）
正在激活（正在打开包装:active）—— 默认红色
已经激活状态（包装已经打开过了）—— 默认紫色
*/
a:link {color: green;}
a:active {color: palevioletred;}
a:visited {color: coral;}
/* 获取焦点 */
input:focus {
background-color: aqua;
}9.伪元素
伪元素是一个附加到选择器末的关键词，允许你对选择元素的制定部分进行样式修改。简单说，伪元素不是元素，而是元素的某个部分。
- 伪元素属于行内元素
- 内容需要书写在content属性中
- 按照规范尽量使用(::)
- ::before 指在元素内容最开始之前插入内容
- ::after 指在元素内容结束之后插入内容
- IE7和以下版本IE浏览器不兼容
h1::before {
content: "￥";
font-size: 14px;
}
/* 在元素内容结束之后插入 */
h1::after {
content: "❤";
color: red;
}三、css的优先级
1.原则
- 顺序读取的原则
- 相同选择器，不同值，后面的优先
- 不同选择器，不同值，比较选择器权重值，谁大谁优先
- 继承原则
- 有一些css样式属性是具有继承性，有继承性的，就可以直接写给祖先元素，保证后代所有的元素都继承祖先的某个样式
- 指定大于继承
2.权重值比较
- 0级，通用选择器，子代>,相邻兄弟
- 1级，权重1，标签选择器和伪元素
- 2级，权重10，类选择器，伪类
- 3级，权重100，id选择器
- 4级，权重1000，内联样式，使用style属性写在标签中的样式
- 5级，权重10000，最高 !important
四、css中常见单位和色值
1.单位
- 长度单位，像素px
- 尺寸单位百分比 %
- 适配的尺寸 vw 、vh
2.时间和角度
- 秒s
- 毫秒ms 1s=1000ms
- 角度deg，0deg~360deg
3.颜色色值
- 英文颜色，元素的默认背景颜色transparent 透明
- 十六进制颜色，三原色（红绿蓝）#rrggbb，分成三个色系。取值范围0-9、a-f。如：#ffff0000
- rgb颜色，rgb(红色范围,绿色范围,蓝色范围)，取值0-255，如：rgb(255,0,0)
总结
第四天学习结束
210
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
