<style></style>
<!--
css样式代码
选择器{
属性名：属性值；
属性名：属性值；
}
egg:div{
fongt-size:90px;
color:red;
}
font-size 字体大小
color 文字颜色
-->
class=""
<!--
类选择器
给<body>中的标签加上class属性
在<style>的样式标签中加入对应的class类
可以实现对应的标签产生对应的class类的效果
class类可以重复使用
.class{
font-size="";
color="";
}
-->
id=""
<!--
id选择器
给<body>中的标签加上id属性
在<style>的样式标签中加入对应的id类
可以实现对应的标签产生对应的id类的效果
id类不可以重复使用 id只能是唯一
#id{
font-size="";
color="";
}
-->
选择器优先级
id > class > 标签
样式表优先级
内联样式表 > 内部样式表 > 外部样式表 就近原则
<!--
font字体属性
font-family font-weight font-size font-style
字体类型 字体粗细 字体大小 字体风格
按顺序
div{
/* font-size:90px ;font-family:italic ;font-style:"宋体" ;font-weight: 100px; */
font: italic 600 50px "宋体"
}
-->
<!-- 文本样式 -->
color 设置文本颜色
text-align 设置元素水平对齐方式 left center right
text-indent 设置首行文本缩进
line-height 设置行间距
text-decoration 设置文本的装饰 none:默认，标准文本
underline:定义文本下划线
overline:定义文本上划线
line-through:定义穿过文本的一条线
<!--
.anli{
text-indent: 35px;
line-height: 30px;
text-decoration: line-through;
} -->
<!-- 鼠标样式 -->
cursor:default 默认光标
pointer 超链接指针（点击）
wait 等待状态（转圈）
help 指示可用的帮助（默认状态旁边有？）
text 指示文档（放在文字上）
crosshair 鼠标呈现十字状（截图时）
<!-- .
baidu{
cursor: default;
}
-->
背景
body{
background-color: black;
background-image: url(./img/kasa.gif);
background-repeat: no-repeat;
background-size: 100%;
}
列表样式
ul{
list-style-type: disc;
list-style-image: url(./img/username.png);
list-style-position: inside;
}
<!-- list-style-type -->
(1)无序列表
disc 实体圆心（默认）
circle 空心圆
square 实体方心
none 无列表标记
(2)有序列表
1 / a / A / i / I
<!-- list-style-image -->
自定义列表标记为图片
属性值:url(图片路径)
<!-- list-style-position -->
列表标记定位
outside
inside
<!-- 并集选择器 用,隔开 -->
h1,p,em,strong,.one{
color: blue;
font-size: 30px;
}
<!-- 交集选择器 前面是标签 后面是id或class类-->
div.one{
color: red;
font-size: 50px;
}
<!-- 后代选择器 用 空格 隔开 标签 id class类都可以 -->
div .two{
color: red;
font-size: larger;
}
<!-- 子元素选择器 外标签>内标签-->
div>span{
color: red;
font-size: 50px;
}
<!-- 属性选择器 标签[属性 或 属性=""]-->
p[name]{
color: red;
}
<!-- 边框样式 -->
div{
width: 500px; solid 实线边框
height: 500px; dashed 虚线边框
background-color: pink; dotted 点状边框
border-top: solid; double 双线边框
border-right: dashed; none 无边框
border-bottom: dotted; hidden 隐藏边框
border-left: double;
/* border-style: solid; */ 全边框
/* border-style: solid double; */ 上 下
/* border-style: solid dashed dotted double; */ 上 右 下 左 顺时针
/* border-color: red; */ 全边框
/* border-color: blue red; */ 上 下
/* border-color: blue red pink purple; */ 上 右 下 左 瞬时针
border-width:10px;
/* border-top: 10px blue solid;
border-right: 5px hotpink dashed;
border-bottom: 20px purple double;
border-left: 6px green dotted; */
box-sizing: border-box; border-box 固定盒子大小
border-content 不固定盒子大小 会被padding撑开
padding: 200px; 内边距
margin: 50px; 外边距
默认都有内外边距
line-height: 500px;
auto 自适应
}
将 块级元素 隐藏
p{
display: none;
}
将 块级元素 显示 转化为 内联标签 显示
p{
display: inline; block块级元素 inline-block块级行内元素
}
浮动 float left 左浮动 right 右浮动
div.nav{
float: left;
}
清除浮动 clear left right both
div.nav{
clear:both;
}
overflow auot hidden
div{
overflow:auto;
}
border-radius:; 弧度
transition:linear; 过度动画 匀速执行
transition:动画速度 过度时间 all;
transform:scale(倍数);图片缩放
<!-- position 定位属性 -->
一、fixed 固定定位
(1) 使用了固定定位的元素【会】 脱离标准文档流
(2) 基于 浏览器窗口 进行偏移
(3) 所有定位元素都基于 top、left、right、bottom四个方位进行偏移
二、relative 相对定位
(1) 使用了相对定位的元素【不会】 脱离标准文档流
(2) 基于 自身原来在网页中的位置 进行偏移
(3) 所有定位元素都基于 top、left、right、bottom四个方位进行偏移
三、absolute 绝对定位
(1) 使用了绝对定位的元素【会】 脱离标准文档流
(2) 使用了绝对定位的元素以它最近的一个“已经定位”的“祖先元素” 为基准进行偏移。如果没有已经定位的祖先元素，那么会以浏览器窗口为基准进行定位
(3) 所有定位元素都基于 top、left、right、bottom四个方位进行偏移
<!--
<style> : 伪类
.nav:hover{
}
.nav::after{ :伪元素
content:" ";
}
</style>
-->
6318
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
