html CSS部分 (总算是全总结完了)
目录 选择器权重 选择器 类型选择器类选择器id选择器标签属性选择器 伪类选择器 伪元素 盒模型 标签显示模式 图片样式设置 CSS常用样式 阴影 (text-,box-)文本对齐方式 (text-align)行间距 (line-)字间距,单词间距,段前间距 font 将多个文本属性一次性设置单行隐藏效果:省略号多行隐藏效果:省略号css单位滚动条设置 列表相关样式 超链接相关样式(link,)鼠标对超链接互动相关样式(hover,)元素的外围框 导入外部字体样式 定位
CSS
CSS( Style , 层叠样式表),控制DOM元素的视觉外观。
同于设置和布置网页 设置字体,颜色,大小,间距甚至还可以用来排版
CSS样式由选择符和属性组成,选择符后面跟着属性,但被一对花括号所包围。属性和值由冒号分隔,每个属性声明以分号结尾。 例如:
<style>.box1 {color: tomato;font-size: 32px;}style>
外部样式表
通过link引用,称为外部样式表
<link rel="stylesheet" href="../css/style.css">
内部样式表
选择器 {
属性名;属性值;
属性名;属性值;
……
在相同规则的选择器下,遵循就近原则
<style>.box1 {color: tomato;font-size: 32px;}.box1 {color: tomato;font-size: 24px;}style>
内联样式表
通过元素上的style定义样式:内联样式
<div style="color:tomato;font-size: 32px;">这里有很多很多的字div>
css文件之间的引用 @
使style具有的h1样式
.css :
h1{color: darkcyan;
}
style.css :
@import 'style1.css';
.box2 {color: #666;font-size: 32px;
}
选择器权重
不同的选择器,权重是不一样的
1.如果我的样式是声明在style这个标签里面,里面的任何选择器,都具备1000的权重
2.所有的id选择器,默认权重100
3.含有类选择,属性选择器,伪类选择器,权重是10
4.选择器中包含伪元素选择器,则为1分
/* 类选择器 */.Class_h1 {color: bisque;/* 颜色是可以被继承的属性 */ }/* 标签选择器 */h1 {color: yellow;}/* id选择器 */#Id_h2 {color: red;}
!
强制让样式属性具备最高最高优先级,可以完全覆盖掉旧的规则
.Class_h1 {color: bisque !important;}
选择器 全局选择器
整个body都会受到影响
写法: * 号加大括号
<style>* {margin: 0;padding: 0;/* 清空内外边距,使页面更加美观*/}
style>
子代选择器
只会影响到第一层元素,不会影响之后的层级元素
通俗来讲就是:只会影响到儿子辈,不会影响孙子辈及之后
写法:大于号加点 + 子类元素名
<style>.div1>.son1 {border: 1px solid #18d39b;}
style>
后代选择器
之后的层级元素都会继承样式
写法:空格加点 + 子类元素名
<style>.div1 .son1 {border: 1px solid red;}
style>
继承父类
当前修改样式这个元素会必定继承父元素的样式
.li1 a {color: inherit;}
与浏览器一致
设置为和浏览器保持一致的样式
.li2 a {color: initial;}
unset 自然继承
设置的自然继承,如果能够继承样式就继承,如果不能够就保持原有的样子
.li3 a {color: unset;}
类型选择器
h1 {/* 类型选择器 */}
类选择器
.box1 {/* 类选择器 */}
id选择器
#box1 {/* id选择器 */}
标签属性选择器
a[title] {/* 标签属性选择器 *//* title为a标签的title属性 */font-size: 32px;}
1.值完全等于
a[href='https://www.baidu.com/'] {/* 值完全等于 */color: salmon;}
2.值以什么开头
a[href^='#'] {/* 以什么属性值开头的 */color: red;}
3.值以什么结尾
a[href$='#'] {/* 以什么属性值结尾的 */color: red;}
4.值包含什么
a[href*='#'] {/* 包含了属性值的 */color: red;}
伪类选择器
冒号后面追加固定关键词。
hover 鼠标放上去的效果
设置一个按钮
<div class="btn">这是一个按钮div>
按钮样式设置:
<style>.btn {width: 120px;height: 40px;line-height: 38px;text-align: center;background-color: black;color: yellow;border: 3px solid yellow;border-radius: 8px;cursor: pointer;/* width、height:div盒子的长和宽line-height:字体实际在按钮内所占的高度text-align:文字在按钮里的位置background-color:按钮的背景颜色color:按钮内字体的颜色border:设置此按钮边框的线宽度以及颜色border-radius:此按钮边框的角的弧度cursor:设置当鼠标放在上面时,鼠标会变成手指(pointer)样式*/}
style>
按钮本来的样子:
按钮的效果设置:鼠标放到按钮上时变换颜色
<style>.btn:hover {/* :hover 鼠标放上去的效果 */background-color: blue;color: white;}
style>
鼠标放上去时