浙江网站搭建,建立网站站点的目的,辽宁工程技术大学电子信息网,网站建设网站软件有哪些方面目录
1. Emmet语法
1.1 快速生成HTML结构语法
1.2 快速生成CSS样式语法
2. CSS的复合选择器
2.1 后代选择器
2.2 子选择器
2.3 并集选择器
2.4 伪类选择器
2.4.1 链接伪类选择器 2.4.2 focus伪类选择器 2.5 复合选择器总结
3. CSS的元素显示模式
3.1 什么是元素显示…
目录
1. Emmet语法
1.1 快速生成HTML结构语法
1.2 快速生成CSS样式语法
2. CSS的复合选择器
2.1 后代选择器
2.2 子选择器
2.3 并集选择器
2.4 伪类选择器
2.4.1 链接伪类选择器 2.4.2 focus伪类选择器 2.5 复合选择器总结
3. CSS的元素显示模式
3.1 什么是元素显示模式
3.2 块元素
3.3 行内元素
3.4 行内块元素
3.5 元素显示模式总结
3.6 元素显示模式转换
3.7 snipaste工具
3.8 单行文字垂直居中
4. CSS背景
4.1 背景颜色 4.2 背景图片
4.3 背景平铺
4.4 背景图片位置
4.5 背景图像固定背景附着
4.6 背景复合写法
4.7 背景色半透明
4.8 背景总结
5. 综合案例
6. CSS三大特性
6.1 层叠性
6.2 继承性
6.3 优先性 1. Emmet语法
1.1 快速生成HTML结构语法 body!-- p*3 --p/pp/pp/p!-- 父子关系 例ulli --ulli/li/ul!-- 兄弟关系 例divp --div/divp/p!-- .nav 默认div --div classnav/div!-- #banner --div idbanner/div!-- p.red --p classred/p!-- olli#two --olli idtwo/li/ol!-- .demo$*3 --div classdemo1/divdiv classdemo2/divdiv classdemo3/div!-- div{今年是2025年$}*5 --div今年是2025年1/divdiv今年是2025年2/div
/body
1.2 快速生成CSS样式语法 style.one {/* tac */text-align: center;/* ti2em */text-indent: 2em;/* w100 */width: 100px;/* h200 */height: 200px;/* lh26px */line-height: 26px;/* tdn */text-decoration: none;}/style
2. CSS的复合选择器 2.1 后代选择器 2.2 子选择器 2.3 并集选择器 !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle/* 后代选择器 */ol li {color: aqua;}.red li a {color: red;}/* 子选择器 */diva {color: brown;}/* 并集选择器 竖着写*/span,.pig li {color: pink;}/style
/headbodyol我在ol内不在li内li我是ol的孩子/lili我是ol的孩子/lilia href#我是ol-1的孩子/a/li/olol classredli我是ol的孩子/lili我是ol的孩子/lilia href#我是ol-2的孩子/a/li/oldiva href#我是div的儿子/apa href#我是div的孙子/a/p/divspan熊大/spanspan熊二/spanul classpigli佩奇/lili猪妈妈/li/ul
/body/html
2.4 伪类选择器 2.4.1 链接伪类选择器 style/* 1.未访问的链接 a:link 把没有点击过的链接选出来 */a:link {color: #333;text-decoration: none;}/* 2.点击过的链接 */a:visited {color: orange;}/* 3.选择鼠标经过的链接 */a:hover {color: skyblue;}/* 4.选择的是鼠标正在按下还没有弹起的那个链接 */a:active {color: green;}/style
链接伪类选择器实际开发中的写法 a {color: #333;text-decoration: none;}a:hover {color: skyblue;} 2.4.2 focus伪类选择器
焦点就是光标把获得光标的input表单元素选取出来 styleinput:focus {background-color: pink;}/style 2.5 复合选择器总结 3. CSS的元素显示模式
3.1 什么是元素显示模式 3.2 块元素 3.3 行内元素 3.4 行内块元素 3.5 元素显示模式总结 3.6 元素显示模式转换 stylea {width: 150px;height: 50px;background-color: pink;/* 把行内元素a 转换为块级元素 */display: block;}div {width: 300px;height: 100px;background-color: purple;/* 把div 块级元素转换成行内元素 */display: inline;}span {width: 300px;height: 30px;background-color: skyblue;/* 行内元素转换成行内块元素 */display: inline-block;}/style
3.7 snipaste工具 3.8 单行文字垂直居中 简洁版小米边框栏
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylea {display: block;width: 230px;height: 40px;line-height: 40px;background-color: #55585a;font-size: 14px;color: #fff;text-decoration: none;text-indent: 2em;}a:hover {background-color: #ff6700;}/style
/headbodya href#手机 电话卡/aa href#电视 盒子/aa href#笔记本 平板/aa href#出行 穿戴/aa href#智能 路由器/aa href#健康 儿童/aa href#耳机 音响/a
/body/html 4. CSS背景
4.1 背景颜色 background-color: 颜色值; /*默认transparent透明*/ 4.2 背景图片 4.3 背景平铺
背景图片和颜色可以同时设置只不过背景颜色会被背景图片覆盖 stylediv {width: 300px;height: 300px;background-color: pink;background-image: url(../上一级路径.jpg);/* 1.背景图片不平铺 (默认情况下背景平铺background-repeat: no-repeat; *//* 2.沿着x轴平铺background-repeat: repeat-x; *//* 3.沿着y轴平铺background-repeat: repeat-y; */}/style
4.4 背景图片位置 4.5 背景图像固定背景附着 4.6 背景复合写法 background: black url() no-repeat fixed center top; 4.7 背景色半透明 4.8 背景总结 5. 综合案例 style.nav a {display: inline-block;width: 120px;height: 58px;background-color: pink;text-align: center;line-height: 48px;color: #fff;text-decoration: none;}.nav .bg1 {background: url() no-repeat;}.nav .bg1:hover {background-image: url();}/stylebodydiv classnava href classbg1五彩导航/aa href五彩导航/aa href五彩导航/aa href五彩导航/aa href五彩导航/a/div
/body
6. CSS三大特性
6.1 层叠性 6.2 继承性 行高的继承性 6.3 优先性 stylediv {color: red !important;}.test {color: pink;}#demo {color: green;}/* 不管父元素权重多高子元素继承的权重都是0 */body {color: #000 !important;}/* a链接浏览器默认制定了一个样式即 a {color: blue;} */a {color: aquamarine;}/stylebodydiv classtest iddemo stylecolor: purple;hahaha/diva href#a标签/a
/body
权重虽然会叠加但不会进位
