样式规定：
1.行内样式：在标签头的位置设置style属性
2.内部样式表：在<head>标签内部定义style属性，在style内部定义选择器
3.外部样式：
定义css引用，在<head>标签内部使用<link rel="stylesheet" href="style.css">
link标签说明要引入一个外部样式表 rel表示引入文件的类型 href表示目标文件
选择器：
基础选择器：
标签选择器:标签类型后用大括号括起来，大括号内部是此标签的样式
<style>
p{
color: orange;
}
</style>
类选择器:使用"."+"类名"的格式定义一个类选择器，大括号内部是此标签的样式
<style>
.one{
color: orange;
}
</style>
应用类选择器：<p class="one">这是一个p标签</p>
id选择器:使用"#"+"id"的格式定义一个id选择器，大括号内部是此标签的样式
<style>
/* id选择器 */
#Demo_05_selector03_p01{
color: red;
}
</style>
应用类选择器：<p id = "Demo_05_selector03_p01">这是一个p标签</p>
通配符选择器:使用*后跟大括号,一般用于清除浏览器的默认设置
*{
/* 通配符选择器 *表示所有，所有未被选择器修改的格式会变为通配符规定的格式 */
color: green;
}
复合选择器
后代选择器:"父标签"+" "+"子标签"的格式，规定此父标签下的所有此类子标签的样式
<style>
/* 将父标签下的特定子标签内的元素格式改为规定格式 */
div a{
color: red;
}
</style>
子选择器，"父标签"+">"+"子标签"的格式，规定只修改父标签下的此类子标签样式，不会找后代标签
<style>
/* 将父标签下的特定子标签内的元素格式改为规定格式 */
div>a{
color: red;
}
</style>
并集选择器："标签"+","+"标签"的格式，规定这些标签的样式
<style>
div,p,span{
color: red;
}
</style>
伪类选择器:a:
a:link{未被访问
color: orange;
}
a:visited{已被访问
color: brown;
}
a:hover{鼠标放置
color:aqua;
font-size: 20px;
}
a:active {点击未松开
color:rgb(8, 237, 103);
}
伪类选择器:input:focus
font-weigh:设置文字粗细1-1000变化 400为正常
font-style:italic(斜体)normal(正常)
font-family:字体;
font-size:字体大小
color: 颜色;
text-align :对齐模式left,right,center
text-decoration:文本装饰:none(没有特殊线条,可以去除a标签的下划线);underline(下划线);overline(上划线);line-through(删除线);
text-indent:文本缩进 单位：em(当前元素文字大小，会随着字体大小的变化而变化) px(一个像素点) 正数向右缩进，负数向左缩进
line-height行高(行间距)
background-color(背景颜色)
background-color: transparent;(背景透明)
background-color: rgba(0,0,0,0);(背景透明)
background-image: url("../img/20230209135645.png");导入图片
background-repeat: ;设置平铺方式 repeat:平铺 no-repeat:不平铺 repeat-x:x轴平铺 repeat-y:y轴平铺
background-size:cover是扩大后使全部填满，多余的部分裁掉 contain是扩大过程中哪一个触到底线即停下
background-position: center;为居中对齐,left为左对齐，right为右对齐
background-position: 25% 75%;
background-position: bottom 50px right 100px;
background-position: right 35% bottom 45%;
background-position: 2px 5px;
border-radius: 10px;在四个角以10px为半径画圆，切出圆角 50%相当于半径是短边的50%
可分别调整每个角的大小
border-top-left-radius: 1em;
border-top-right-radius: 3em;
border-bottom-right-radius: 2em;
border-bottom-left-radius: 2em;
简写形式:
border-radius: 1em 3em 2em 2em;四角圆的半径(从左上开始顺时针旋转)
设置边框:
border-color: red;边框颜色
border-style: solid(实线);dashed(虚线)dotted(更虚的虚线)边框线条格式
border-width: 2px;线条粗2px
border: 2px dotted blue;可简写成此形式(宽度 线条格式 边框颜色)
css设置宽高：
对于块级元素一般不会失效
对于行内元素不起作用
可以使用display属性修改元素的显示模式
display:block 改成块级元素[常用]
display:inline 改成行内元素[不常用]
display:inline-block 改成行内块元素 [可以进行块级元素的设置，但是显示还是行级元素]
边框:外边框>边框>内边框>本体(定义的宽高)
本体设置：width: 200px; height: 200px; background-color: gray;
设置边框
border-color: red;边框颜色
border-style: solid(实线);dashed(虚线)dotted(更虚的虚线)边框线条格式
border-width: 2px;线条粗2px
border: 2px dotted blue;可简写成此形式(宽度 线条格式 边框颜色)
设置内边框:
padding: 20px;
padding: 20px 15px 10px 5px; 四边的距离(上右下左)
padding-left:20px(距离左边框20px)
padding-right:20px(距离右边框20px)
padding-top:20px(距离上边框20px)
padding-bottom:20px(距离下边框20px)
设置外边框:
margin: 30px;
margin:20px 15px 10px 5px; 四边的距离(上右下左)
margin-left:20px(距离左边20px)
margin-right:20px(距离右边20px)
margin-top:20px(距离上边20px)
margin-bottom:20px(距离下边20px)
box-sizing: border-box;(border边框之内大小为设定的width和height)
content-box 是默认值。如果你设置一个元素的宽为 100px，那么这个元素的内容区会有 100px 宽，
并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。
border-box 告诉浏览器：你想要设置的边框和内边距的值是包含在 width 内的。
也就是说，如果你将一个元素的 width 设为 100px，那么这 100px 会包含它的 border 和 padding，
内容区的实际宽度是 width 减去 (border + padding) 的值。
块级元素居中
1,指定宽度
2，把水平margin设置为auto
演示:(1)margin:0 auto;
(2)margin-left: auto;margin-right: auto;
(3)margin: auto;
margin和padding设为0;
*{
/* 去除浏览器默认样式 */
margin: 0;
padding: 0;
}
被设置为 display:flex 属性的元素, 称为 flex container
它的所有子元素立刻称为了该容器的成员, 称为 flex item
flex item 可以纵向排列, 也可以横向排列, 称为 flex direction(主轴)
当父元素设置为 display: flex 之后, 子元素的 float, clear, vertical-align 都会失效
display:flex应该加在父标签中，使父标签下的标签变为弹性布局(flex柔软的)
justify-content:表示子元素位于父元素的位置
设置的主轴(横轴上)：flex-start(左对齐)center(中央)flex-end(右对齐) space-around(等距离)space-between(左中右分隔)
align-items设置侧轴(纵轴)上的元素排列方式
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
