标签：优先级 样式 元素 边框 选择器 Day04 display
一、关系型选择器
（2）子代选择器
可以选中某个元素的直接的子元素，与后代选择器不同的，选择的范围更小
父元素>子元素（样式声名）
层级关系区别：祖先元素>父元素>子元素 使用>进行连接的
（3）兄弟选择器
同一层的关系选择器，可以选中该元素后面的兄弟元素
某元素选择器~该元素后面的所有兄弟（样式声名）
注意兄弟选择器选到的是该元素后面的兄弟，选不到之前的兄弟
（4）相邻选择器
同一层关系选择器，可以选中参照后面的紧挨着的某个选择器
元素选择器 +该元素后面的唯一的相邻兄弟（样式声名）
二、伪类选择器
伪类选择器的作用是匹配某个元素，是不同状态下的
选择器：伪类（样式声名）
a:link {样式声明}` 没有被打开之前，或者没被打开过 特有样式
a:visited {样式声明} 访问过后 特有样式
div:hover {样式声明} 鼠标悬停
p:active {样式声明} 点击激活
input:focus {} 属性表示 input 标签获取焦点
input:cheaked {} input 单选、复选框
三、伪元素选择器
CSS 伪元素用于设置元素的“指定部分”的样式
；；before 表示元素最前边的部分，紧随着标签的部分
after 表示元素的最后边的部分，紧随着标签的部分
before{content:""}:after{content:""} content 必须写
两个冒号 (`::`) 而不是一个冒号 (`:`)，这是 CSS3 规范中的一部分要求，目的是为了区分伪类和伪元素。大多数浏览器都支持这两种表示方式。
四、css 优先级
（1）优先级的原则
顺序读取的优先级：是相同类型选择器采用顺序读取后来的优先
选择器的优先级：不同类型选择器，按照权重原则采用(id 选择器 100,类选择器 10,元素选择器 1)
继承的优先级：制定样式的优先级大于继承样式的优先级
多个选择器一起使用的时候：根据权重值累加比较值后采用优先级
最高优先级：!important，直接获取最高优先级，内联样式不能加!important
（2）优先级的比重大小
CSS 引入方式分:`内联样式 > 内部样式 > 外部样式`（但要注意外部样式引用要在内部样式下面，才会低于内部样式的优先级）
五、尺寸和单位
定义高度和宽度可以使用的长度单位px,pt,em,rem,%等
一般情况在pc端页面开发使用px和pt
移动端开发%，em,rem,vw,vh 等响应式单位
最大宽度最小宽度，最大高度和最大宽度（在响应式部分进行讲解）
max-width 最大宽度，max-height 最大高度
min-width 最小宽度， min-height 最小高度
不允许出现负值，最小不满足时出现横向或竖向拖动条
五、颜色
1.英文颜色
常用 red,green,blue,yellow,orange,pink,purple,gold
transparent 透明色
2.十六进制颜色
#rrggbb#必须写
1、2 位代表红色范围
3、4 位代表绿色范围
5、6 位代表蓝色范围
十六进制颜色范围是 0-9，a-f
如果三组都是相同的值，可以简写
企业标注图一般都使用十六进制颜色
3.rgb 颜色
rgb()`函数，三个参数，用逗号分隔
r 代表红色色值，g 代表绿色色值，b 代表蓝色色值
取值范围 0~255 之间的 256 个数
rgba()`a 代表透明度，取值 0~1 之间的数字，0 代表完全透明
六、边框
1.边框的属性
border-width`边框宽度
border-style`边框样式，solid 实线，dashed 虚线，dotted 点点
border-color`边框颜色
2.边框的方向
border-bottom`下边框
border-top`上边框
border-left`左边框
border-right`右边框
3.边框都简写方式
border:30px solid green; 三个位置分别可以写边框宽度、边框样式边框颜色，没有严格要求书值都写顺序。
七、元素的分类
1.元素的显示属性
display 元素以方式显示
display: block; 以块级元素方式显示
display: inline; 以内联元素方式显示
display: inline-block; 属于行内元素，但以块级显示，独占一行，可以设置宽高
display: none; 让元素不显示
display: table; 以 table 表格方式显示
<style>
*{
margin:0;
padding:0;
}
.d1{
width: 800px;
background-color: rgb(252, 3, 3);
}
.d1 li{
list-style: none;
}
.d1>ul{
display: none;
}
.d1:hover >ul{
display: block;
}
.d1:hover{
background-color: hotpink;
} <ol class="d1" align="center">
<h1>新闻中心</h1>
<ul>
<li>新闻热点</li>
<li>焦点动态</li>
<li>时事热点</li>
</ul>
</ol>2.内联元素
内联元素也可以叫行内元素
设置宽度、高度无效（行内块级显示元素除外）
和其他内联元素横向从左向右排列
设置上下内外边距无效
常见的行内元素 span a
3.inline-block
它是行内元素的一种
不自占一行横向从左向右排列
可以设置宽度、高度以及内外边距
常见的行内块级显示元素 img button input
幽灵空白节点
在HTML5中文档声名，内联元素所有的解析和渲染表现的就如每一行盒子的前面增加了一个“空白节点”，宛如一个幽灵，不占据任何宽度，也看不见摸不到，但是的确缺存在。
方法1：把 img 标签变成块级元素 `display: block;`
方法2：找他爹，父级元素`font-size: 0;`去掉空白节点
div {
width: 300px;
background-color: red;
/* 去掉幽灵 */
font-size: 0;
}
img {
/* 就是和父元素一样宽 */
width: 100%;
display: block;
}4.块级元素
每个元素都自占一行，后面的元素也只能另起一行
元素的宽、高以及内、外边距都可以设定
块级元素宽度不设定，为父级元素宽度
如果高度不设置为内容高度，如果没有内容，高度为 0
常见的块级元素 div,p,h1,ul,li,table
八、显示和隐藏
1.display:none（消失）
使元素消失，脱离文档流
display：block; 使元素出现，并且让元素显示为块级元素
2. visibility: hidden
visibility: hidden；元素隐藏，占据页面空间
visibility: visible; 元素显示
3. opacity: 0;
opacity 属性代表元素的透明度，取值范围是 0-1 之间的数字,0 代表完全透明,1 代表不透明
缺点：元素内的一切都会随着透明度改变
十、文本格式化
1. 字体的书写
（1）字体大小
字体大小可以为不同的单位，但是常用单位px，
不允许出现负的像素值，尽量不要出现小数。
Font-size:30px 字体大小的属性
x 像素 pt 磅 em 父级元素的倍数 rem 根标签的倍数 vw 视窗尺寸
用户的浏览器默认渲染的文字大小是“16px”
（2）字体系列
Font-family 属性设置所需要的字体
一个单词可以直接使用，多个单词需要用引号引起来，中文尽量用双引号引起来
字体顺序从前往后一次执行
很多字体商用是收费的
（3）字体字重
字体字重就是字体粗细，但根据浏览器的渲染不同展现的粗细也不同，移动端建议不要太粗
font-weight 字体的字重，字的粗细
1 和 1000 之间的数字类型值，必须要是 100 的倍数。
常用关键词：normal（400 默认）、bold（700）
（4）字体样式
font-style 字体样式属性
font-style: normal; 默认正常
font-style: italic; 倾斜
（5）字体的简写方式
font:italic 400 40px “楷体”;
顺序：字体样式 字重 字号 字体系列，不可改变顺序
最简方式 font：40px ”楷体“; `字号和字体系列，不能再减少
（6）字体颜色
Color:red 颜色色值
取值：英文 十六进制 rgba()
2. 文本属性
（1）文本的水平对齐方式
text-align 针对块级元素中的内联元素，它需要写在父级（块级元素）中
left 默认,左对齐 center 居中对齐 right 右对齐
(2) 文本的行高
line-height`属性可以设置文本的行间距,可使用长度单位 px，或使用无单位的倍数如 1，1.5，2
文本的行高包括文字上下间距+文本高度，文本居中显示的时候上下行间距相等
(3) 文本的线条修饰
在使用 a 标签的时候有一个默认下划线,有时不需要,在 css reset 中将 a 标签的默认下划线去掉
text-decoration: none; 无线条
text-decoration: underline; 下划线
text-decoration: overline; 上划线
text-decoration: line-through; 删除线
（4）首行缩进
text-indent 指定块容器中第一行文本发生缩进
text-indent:2em 两倍的字体大小,相当于空两格
(5)文本的换行
文本换行的原因
正常文字的换行(亚洲文字和非亚洲文字)元素本身具有个属性叫 white-space:normal ,当定义的宽度之后自动换行。
对于连续的英文字符和阿拉伯数字不能换行,这是因为 div 中，英文字母之间没有空格的话，它会默认认为这是一个英文单词，所以单词就一次输出不换行
换行属性
white-space: nowrap;`不换行
word-wrap:break-word;`强制换行
（6）文本溢出
Text-overflow:ellipsis
div{
background-color: rgb(201, 245, 8);
width: 360px;
/*超出部分隐藏*/
overflow: hidden;
/*当文本溢出时显示的标记*/
text-overflow: ellipsis;
/*强制不换行*/
white-space: nowrap;
} （7）文字阴影
文字阴影和盒子阴影类似,都需要具有关键的内容,没有内阴影
Text-shadow 为文字添加阴影。
可以添加多个阴影，阴影值之间用逗号隔开。
第一个值和第二个值代表： x 轴上的偏移量 和 y 轴上的偏移量,使用长度单位
第三个值代表：模糊半径的大小（羽化程度）。
第四个值代表：颜色值。
十一、盒子阴影
Box-shadow:x 轴偏移量 y轴偏移量 羽化 扩展 颜色 内阴影
第一个值和第二个值代表： x 轴上的偏移量 和 y 轴上的偏移量（正负值）。
第三个值代表：模糊半径的大小（羽化）不允许负值。
第四个值代表：扩展半径的大小，向四周扩散相等的大小,正值放大，负值缩小。
第五个值代表：颜色值。
第六个值代表：阴影向内 inset：默认阴影向外扩散。
div{
align-items: center;
height: 200px;
width: 200px;
border-radius: 50%;
background-color :black;
box-shadow: inset 20px 6px 30px 0px #fff, 20px -3px 20px 8px #fff;
}
标签：优先级,样式,元素,边框,选择器,Day04,display 来源： https://blog.csdn.net/qq_54195672/article/details/121550348
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。