2022-07-10 第一小组 张明旭 前端CSS学习记录
今天是正式学习的第二天，昨天那个作业项目真的难，自己做一会就得问这问那，还有大神带一带（?_?）...
今天学习的内容是前端中的CSS，男上加男。。。。。
知识点：
Css层叠式表（网页美化）
1.定义样式表
2.把样式表添加到HTML中
一.定义样式表
1.每一个标签都有行内样式style：
行内样式好不好？
如果样式不重复使用可以用
例<p style=”background:red;“>...</p>
<!-- 行内样式，内联样式 -->
<p style="background: rgb(0, 255, 85);">I love Java</p>
<span style="background: rgb(0, 255, 85);">I love css</span>
<h1 style="background: rgb(0, 255, 85);">i love html</h1>
2.内页样式（嵌入样式）
（1）：标签选择器
/* 根据标签来命名 */
/* 选择器selector */
/* 标签选择器：可以让页面上所有的p标签都有对应的样式 */
p {
background: red;
}
span {
background: yellow;
}
（2）：类选择器：声明样式需要一个英文的点： . ，属性用class不要有点
/* 类选择器 */
/* 标签选择器和类选择器哪个优先级高？ */
.bg {
background: blue;
}
（3）：ID选择器：声明样式需要一个#，对应的元素的id要匹配
/* id选择器 */
#spring {
background: purple;
}
3.外部样式（推荐使用）
<!-- 引入外部的css样式 -->
<link rel="stylesheet" href="你的CSS链接">
优先级：最高优先级是直接在标签中设置样式
其次是id选择器
其次是类选择器
最后是标签选择器
4.css选择器：
1、标签选择器
2、类选择器：一个标签元素可以选择多个样式，样式名中间空格隔开
3、id选择器
4、div,p{}:并级选择器：使页面上所有的标签div和p样式相同
div,p {
color: yellow;
}
5、div p{}：后代选择器：选中只要在div里的p，无论嵌套多少层的选择器
/* div里面的p */
div p {
color: purple;
}
6、div>p{}：子代选择器：选中只要在div里的p的选择器
div > p {
color: orange;
}
7、div+p{}：选中紧跟着div的p 的选择器
/* 选中紧跟着div的p */
div+p {
color: blue;
}
8、[type]{}: 选中所有带有type属性的标签
9、[type=text]{}：选中页面上所有带type=text属性的标签
10、[type~=t]{}： 选中页面上title属性包含单词的所有元素
11、伪类选择器：link: hover: active: visited:
/* 默认样式 */
a:link {
color: red;
}
/* 鼠标悬停样式 */
a:hover {
color: green;
}
/* 元素被激活 */
a:active {
color: blue;
}
/* 点过的链接 */
a:visited {
color: gray;
}
12、nth-child（）{}：选中第几个或一系列有规律的标签的选择器
让第3个序列变红
让表格的2n行变红
li:nth-child(3) {
color: red;
}
tr:nth-child(2n) {
background: red;
}
13、：checked：选中所有被选中的元素
二、css层叠样式表
1、层叠性：（1）如果样式冲突 ，遵循就近原则（那个样式离结构近用哪个）
（2）如果样式不冲突，就不层叠
2、继承性：子标签会继承父标签的某些样式。文本颜色、字号、背景颜色
优先级：类>标签>id>
权重（重要性）：（1）继承的样式权重最低
（2）行内样式权重最高
（3）如果权重相同，就近原则
（4）用！important更改权重为无限大
三、css常用的单位
1、px像素：绝对单位，一个像素代表一个点。如100px*100px的正方形，宽高为100个点
2、em是相对单位。它会参考它的父级元素，字体，父级元素的字体是16px，
要设置元素的字体大小为2em，当前元素的字体大小就是32px
3、rem是相对单位，有页面决定，当浏览器字体改变了字号设置，页面的字号也随之变化。应用于老人版
4、百分比：相对于父级元素的比例。
最新文章
- 关于反射率(reflectance)
- Express安装过程
- 移动App崩溃的测试用例设计
- 06- Shell脚本学习--其它
- Ionic2学习笔记（3）：Pipe
- 几种在Linux下查询外网IP的办法
- 最大熵的Java实现
- Javascript手记-执行环境和作用域
- Java缓存--JCS
- 【总结】OJ练习，进行的一些编程语言方面总结
- classic asp中使用ADODB.Command防止sql injection
- 工具类_java 数字转化为汉字大写
- JS 某一区域内所有CheckBox全选和取消全选(.net)
- CPP 栈 示例
- tomcat 发布后中文乱码问题
- Qt__自定义事件
- html的表格 table
- final与abstract关键字
- poj--2299（树状数组+离散化）
- DDOS攻击详解