做团餐 承包食堂的企业网站,网站的默认首页,网站免费正能量不用下载,wordpress 文章查看次数——————————————精华部分——————————————
1、选择器 #xff08;1#xff09;基本选择器#xff1a; 标签选择器 body{} 类选择器 class .class名称{} ID选择器 id #id名称{}
优先级#xff1a;ID选择器 类选择器 标签选择器
1基本选择器 标签选择器 body{} 类选择器 class .class名称{} ID选择器 id #id名称{}
优先级ID选择器 类选择器 标签选择器
2层次选择器 后代选择器 body p{} 子选择器 bodyp{} 相邻兄弟选择器 body p{} 通用选择器 body~p{}
3结构伪类选择器 加冒号的条件 ul li:first-child{}
4属性选择器 a[id]{}
2、span标签 作用重点突出的文字用span套起来
3、文本样式 排版text-align 段落缩进text-indent: 行高line-height
4、a的结构伪类 鼠标悬浮的状态 a:hover
5、列表 列表类型 list-style 去掉原点 none
6、盒子模型 外边距margin 内边距padding 边框border
7、display 块级元素作用及举例独占一行h1~h6,p,div,列表 行内元素作用及举例不独占一行span,a,img
块元素标签block 行内标签inline 写在一行的块级标签inline-block 不显示none
8、浮动 浮动标签float 清除浮动clear:both 解决父级边框塌陷的方法增加空div并清除浮动
9、定位 相对定位relative相对原文档流位置的偏移原位置仍保留 绝对定位absolute相对于父级非static定位或浏览器的位置进行偏移原位置不保留 固定位置fixed
10、z-index 最高层级999
11、透明度标签opacity ——————————————详细说明——————————————
教程链接2、什么是CSS和发展史_哔哩哔哩_bilibili 1、选择器
作用选择页面上的某一个或者某一类元素
1基本选择器
标签选择器 html标签{ … }
类选择器class .class的名称{ … }可以复用
ID选择器id #id名称{ … } 唯一的不能复用 优先级ID选择器 类选择器 标签选择器 2层次选择器
后代选择器在某个元素的后面 祖爷爷 爷爷 爸爸 你 body p{ background: red;
}
影响所有的p标签 子选择器一代儿子 bodyp{ background: red;
} 只影响body下一级的p标签 相邻兄弟选择器同辈 .active p { background: red;
} 只影响下一个的相邻的兄弟 通用选择器当前选中元素的向下的所有兄弟元素 .active~p{
background: red;
}
影响向下的所有同级元素 3结构伪类选择器
伪类条件 ul的第一个子元素
ul li:first-child{ background: red;
} ul的最后一个子元素
ul li:last-child{ background: red;
} 选中p1定位到父元素选择当前的第一个元素 选择当前p元素的父级元素选中父级元素的第一个
p:nth-child(1){ background: red;
} 4属性选择器常用
可以是属性名或者属性名属性值正则
为精确匹配 *为包含 存在id属性的元素 a[]{}
a[id]{ background: yellow;
} a[idfirst]{ background: yellow;
} class中有links的元素,
a[class*”links”]{ background: yellow;
} 2、span标签
作用重点要突出的字使用span标签套起来 3、文本样式
text-align: 排版 center左右居中
text-indent: 2em; 段落首行缩进。 2Em是2个字2px是2个像素
行高line-height和块的高度height一致就可以上下居中。 水平对齐参照物a,b
img, span{ vertical-align: middle;
} 4、a的结构伪类
a:hover 鼠标悬浮的状态
a:active 鼠标按住未释放的状态 5、列表
ul li
list-style: none 去掉原点 circle 空心圆
decimal 数字
square 正方形 6、盒子模型 margin外边距
padding内边距
border边框 外边距的妙用居中元素。要求外层为块元素且有固定的宽度
margin: 0 auto; margin: 0; 上下左右 都为0
margin: 0 1px; 上下为0左右为1px
margin: 0 1px 2px 3px; 上0 下1px 左2px 右3px 7、display
块级元素 独占一行
h1 ~ h6pdiv列表… 行内元素不独占一行
span a img strong … 行内元素可以被包含在块级元素中反之则不可以。 block块元素
inline行内元素
inline-block保持块元素的特性但是可以写在一行
none不显示 8、浮动float
当元素设置浮动后会自动脱离文档流。
向左浮动或者向右浮动向左或向右移动直到自己的边界紧贴着包含块一般是父元素或者其他浮动元素的边界为止。 9、float父级边框塌陷问题
clear: right; 右侧不允许有浮动元素
clear: left; 左侧不允许有浮动元素
clear: both; 两侧不允许有浮动元素 解决方案
1增加父级元素的高度
2增加一个空的div标签清除浮动
div class”clear”/div
.clear{ clear: both; margin: 0; padding: 0;
}
3在父级元素中增加一个 overflow: hidden;
原因
隐藏溢出当内容超过其父元素时可以使用该属性和值将溢出的部分裁剪掉。
清除浮动当子元素浮动时按照上一个特性应该将子元素超出的部分截掉。但是子元素有浮动无法裁剪所以只能由父元素增加高度去包裹住子元素使得父元素拥有了高度而这个高度是跟随子元素自适应的高度这样就把浮动的子元素包含在父元素内了。 4父类添加一个伪类 after
#father:after{ content: ‘’; display: block; clear: both;
} 小结
1浮动元素后面增加空div
简单代码中尽量避免空div
2设置父元素的高度
简单元素假设有了固定的高度就会被限制
3overflow
简单下拉的一些场景避免使用
4父类添加一个伪类after推荐
写法稍微复杂一点但是没有副作用 10、display和float对比
display的方向不可以控制
float浮动起来的话会脱离标准文档流所以要解决父级边框塌陷的问题 11、定位
1相对定位 relative
相对于自己原来的位置进行偏移需要加额外的定位
它仍然在标准文档流中原来的位置会被保留
上下左右 比如top: -20px; 2绝对定位 absolute
基于xx定位上下左右
没有父级元素定位的前提下相对于浏览器定位假设父级元素存在定位通常会相对于父级元素进行偏移在父级元素范围内进行移动
相对于父级非static定位或浏览器的位置进行指定的偏移绝对定位的话它不在标准文档流中原来的位置不会被保留。 3固定定位fixed 12、z-index
最低层级为0最高层级为999 13、透明度
opacity: 0.5; 背景透明度
