概述
菜鸟笔记2
2019年8月28日周三 20：46 重庆
以下内容来自老师授课时所摘抄笔记，如有冒犯，接受私信~
今日内容
1、CSS选择器
①元素选择器
②ID选择器
html: <元素 id=“id值”></元素>
css : #id值{样式规则;}
③类选择器
html: <元素 class=“类名”></元素>
css : .类名{样式规则;}
④子代选择器（父级选择器>子级选择器{样式规则}）：父级选择器和子级选择器由基础选择器(元素，id，类，通识符)构成；子级选择器只会选择一级进行样式规则的设置
例：
若div ul li{···}则其列表符号也会变红
⑤后代选择器（父代选择器 子代选择器{样式规则;}）
例：
误区：#red {}中间有空格 导致效果加不上
⑥群组选择器（选择器01,选择器02,…,选择器n{样式规则;}）
例：
p>a,div>a{
color: red;
}
⑦伪类选择器
鼠标移入伪类
选择器：hover{
鼠标移入之后的样式规则
}
例：
.title{
color: red;
}
.title:hover{
color:blueviolet;
}
.box:hover>a{
color: red;
}
结构伪类
选择器:before{
content: "";
--->
可写，可不写，不写该属性选择器失效（必须存在）
修饰该伪类的样式规则;
}
选择器:after{
content: "";
修饰该伪类的样式规则;
}
例：
.text{
color: orange;
}
.text:before{
content: "Me";/*则me会出现在handsome前面且不可选中me，content必须有，但可不要内容应该是content:""*/
color: aquamarine;
}
.text:after{
content: "YOU";
color: black;
}
查询结构
选择器:first-child{
该选择器集中第一个元素的样式规则;
}
选择器:last-child{
该选择器集中最后一个元素的样式规则;
}
选择器:nth-child(n){
该选择器集中第n个元素的样式规则
}
⑧通识符选择器
*{样式规则}
2、选择器命名
①选择器名称有数字，字母，-和_构成，且不能以数字开头
②取名规律
驼峰命名法：将各个单词的首字母进行大写
（userName/UserName）
（myFirstPage/MyFirstPage）
匈牙利命名法：将单词之间用-或者_相连
（user-name/user_name）
（my-first-page/my_first_page）
小组项目命名遵循匈牙利命名法（wx-box）
3、类选择器叠加
（<元素 class=“类名01 类名02 类名03 … 类名n”></元素>）
一定要有bold的类选择器，才可以空格即.bold{font-weight: bold;}
<p class="red bold">我希望我的颜色 为红色</p>
一定要有bold的ID选择器，才可以id="bold"即 #bold{font-weight: bold}
<p id="bold" class="orange">ul>li>p</p>
<p class="orange bold center">我也希望加粗</p>
可见day03>practice.html
注意：
①当前元素处于已经有样式规则之下需要添加新的样式规则，且不影响原有的类名样式规则时使用
②清除元素浮动影响时使用
4、CSS选择器优先级
①ICE计算法
I —> id选择器 --数值–> 100
C —> 类选择器 --数值–> 10
E —> 元素选择器 --数值–> 1
两种情况：
单个选择器的数值比较，值越大，优先级越高；
当多个选择器组合而成一个选择器时，需将多个选择器的数值进行相加，值越大，优先级越高。
<style>
p{color: rebeccapurple;} /*1*/
.text{color: cornflowerblue}/*10*/
#text{color: aquamarine}/*100*/
.list h1{
color: pink;
}
/*只有加了.list才能改变颜色（20），不加则为（11）*/
.list .green{color: green}
</style>
·
<p id="text" class="text">p</p>
<ul class="list">
<li>
<h1>list>li>h1</h1>
</li>
<li>
<h1 class="green">list>li>h1:green</h1>
</li>
</ul>
②元素样式规则继承
子代选择器会继承父代选择器的样式规则
5、CSS常用样式规则
①文本颜色（color）
单词(black,red,…)
十六进制取值(#ff00ff,#fff,#000)
rgb255色[rgb(255,0,180)]
rgba透明色[rgba(255,0,168,0-1)]
②文本大小（font-size）
单位(px/%/em/rem/rpx)
默认字体大小为16px
字体最小设置值为12px（有些浏览器可以，但建议不小于12px）
字体最大设置无限
③文本字体
微软雅黑：
font-family: “Microsoft YaHei”;
④文本加粗（font-weight）
normal 正常即不加粗
bold 加粗
100-900 按照数值从100~900依次加粗
（1-500无太大区别，600-900无太大区别）
⑤文本对齐（text-align）：left(默认)
⑥文本行高（line-height）：单行文本行高与高度相等时，文本单行上下居中
.line{
/*可使其居中*/
line-height: 50px;
height:50px ;
background: red;
}
·
<p class="line">height</p>
⑦文本缩进（text-indent）
⑧文本横线（text-decoration）
none 空即无横线
underline 下横线
overline 上横线
line-through 删除线
⑨文本字间距（letter-spacing）
⑩边框样式（border-style）
solid 实线
dashed 矩形虚线
dotted 圆点虚线
double 双实线
简写属性（border: 宽度 样式 颜色;）
方向边框设置
border-left/top/right/bottom: 宽度 样式 颜色;
例：
三角（transparent是透明）
.arrow{
/*width: 0;
要或不要，目前都可实现效果*/
border-top: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid palevioletred;
}
边框圆角（border-radius）
当边框取值为50%时，正矩形即为正圆
边框圆角方向设置
左上：border-top-left-radius
右上：border-top-right-radius
左下：border-bottom-left-radius
右下：border-bottom-right-radius
/*圆形*/
.radius{
width: 300px;
height: 300px;
border-top: 5px solid yellowgreen;
border-right: 5px dashed lightgoldenrodyellow;
border-bottom: 5px dotted gray;
border-left: 5px double palevioletred;
border-radius: 200px;
}
今日份收获
1、元素样式规则继承
外边距和内边距不会继承，只会继承字体样式
2、元素的border由三角形组成，不是矩形
（具体参看Chrome收藏栏CSS三角理解）
3、border-radius为200px时为圆形
4、快捷键（webstorm）
①直接p后tab快速创建标签
②在需要复制的内容后ctrl+D ，下一行会自动复制
③ol>li再按tab则会显示完整
④p.class名 后 tab会添加class
（p#ID名应该同理）
注意事项
1、选择器的叠加使用很重要，注意常使用，以熟练
2、十六进制的颜色取值很少用#000，尝试下#333
补充
1、p 与 div 区别在于前者有默认间距，后者无
2、 div 与 div 无默认间距
最后
以上就是寒冷汉堡为你收集整理的2019/8/28，day03,web前端今日内容今日份收获的全部内容，希望文章能够帮你解决2019/8/28，day03,web前端今日内容今日份收获所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
发表评论 取消回复