CSS教程
CSS总结3
一，
1，chorme调式工具 -->右击-->检查
2，快速向下复制一行 shift+alt+向下箭头
二，1，emmet语法快速生成html样式
（5）-->p.demo(class) div#two(id)
(6)--> 有顺序div{$}*5 无顺序ul>li*5 div{文字}*5
,2，emmet语法快速生成css样式：直接打出首字母
三，复合选择器
1，后代选择器
<style>
/* 注意用空格隔开 */
ul li a {
color: beige;
}
/* 多个ol选一个 */
.nav li {
color: blue;
}
</style>
<body>
<ol class="nav">
<li>yayayy</li>
</ol>
<ol>
<li>啦啦啦啦</li>
</ol>
<ul>
<li><a href="#">阿巴巴</a></li>
</ul>
</body>
2，子元素选择器
<style>
.div>a {
color: blueviolet;
}
</style>
<body>
<div class="div">
<!-- 只有这里的a变色 -->
<a href="#">儿子</a>
<p>
<a href="#">孙子</a>
</p>
</div>
</body>
3,并集选择器
<style> //习惯竖着写，最后一个选择器不加逗号
div,
p,
.pink li {
color: aquamarine;
}
</style>
<body>
<div>qw</div>
<p>df</p>
<ul class="pink">
<li>sda</li>
<li>eg</li>
</ul>
</body>
4，链接伪类选择器
<style>
/*顺序固定需牢记*/
/* 链接伪类用： */
a:link {
/* 未访问过的链接 */
color: black;
}
a:visited {
/* 已经访问过的链接 */
color: coral;
}
a:hover {
/* 鼠标经过时的链接 */
color: cyan;
}
a:active {
/* 鼠标按下没有松开 */
color: darkkhaki;
}
</style>
<body>
<a href="#">小猪佩奇</a>
</body>
5，focus伪类选择器
<style>
input:focus {
/* :focus把获得光标的input表单元格选取出来 */
background-color: darkorange;
}
</style>
<body>
<input type="text"><input type="text"><input type="text">
</body>
四，CSS元素显示器
1，块元素
特点：1）自己独占一行
2）宽，高，行内外间距可变
3）宽度默认值与浏览器一样宽
4）可放任何元素，块元素，行内元素2
注：1）文字类元素（h1 p）不放块元素 (div)
2,行内元素
特别： 1）多个可以在一行
2）宽高设置无效
3）宽度默认值是本身内容的宽度
4）行内元素只能收纳文本和其他元素
注：1）链接里面不再放链接
3，行内块元素（img/ input/ td/）
特别：1）一行放多个
2）可以设置长宽行内外边距
五，元素显示模式
<style>
/* 转化为块元素：display:block */
/* 转为行内元素： display:inline */
/* 转化为行内块元素: display:inline-block */
</style>
六，
1，单行文字垂直居中
让line-height的像素等于height像素
全放在盒子里（div,要有宽高）
2，背景颜色 透明色
background-color: transparent;
3,背景图片
background-image: url(插入背景图片，类似img);
background-images: none 无背景图
4，背景平铺
background-repeat
5，
background-position: center top;
背景图片位置-方位名词
1），指定两个值是方位名词，前后两个值顺序无关，比如left top和top left 效果一致
2）如果只指定了一个方位名词，另一个省略，则省略的默认居中对齐
上 (top)中(center)下 (bottom) 左 (left)中(center)右（right）
background-position:20px 40px;
背景图片位置-精确单位
1），参数值是精确坐标，第一个一定是x轴，第二个一定是y轴
2）如果只指定一个数值，则一定是x轴，另一个居中对齐
background-position: 20px center;
背景图片位置-混合单位：第一个一定是x轴，第二个一定是y轴
6,综合案例
<style>
/* 标题也能成为盒子 */
h3{
width: 118px;
height: 40px;
background-color: aqua;
font-size: 14px;
font-weight: 400;
line-height: 40px;
background-image: url(图片网址);
background-repeat: no-repeat;
/* 不平铺 ，二者基本连着用*/
background-position: left center;
/* 注意空格 */
text-indent: 1.5em;
}
</style>
</head>
<body>
<h3>成长守护平台</h3>
</body>
</html>
<!-- 获取网页图片办法：打开检查，单击图片，找到源代码， -->
<!-- 在旁边的代码里找到图片网址，右键open in new tab,然后图片另存为文件里面 -->
<!-- 若图片不是居中对齐，则不在body里面插入图片，而是在head里面 -->
7，超大背景图
<style>
body{
background-image: url(图片网址);
background-repeat: no-repeat;
background-position: top center;
}
</style>
8，背景附着（默认图片跟着背景走）
background-attachment ：fixed; 图像不随着文字滚动
9，背景复合写法：(用空格隔开)
background:transparent url() no-repeat fixed center top;
background:背景颜色 背景图片地址 背景平铺 背景图片滚动 背景图片位置；
10，背景颜色半透明：background:rgba(0,0,0,0.3)
1),最后一个参数是透明度，取值在0~1之间
2）背景半透明是盒子背景半透明，盒子里面内容不影响
-
CSS-Module学习：轻松入门指南11-14
-
CSS9资料入门指南11-12
-
CSS浮动资料详解：初学者指南11-12
-
CSS选择器资料详解与实战教程11-12
-
CSS样式资料：初学者必备指南11-12
-
CSS项目实战：从入门到上手11-11
-
CSS定位项目实战：新手指南11-11
-
CSS浮动项目实战：初学者指南11-11
-
CSS选择器项目实战：从入门到上手11-11
-
CSS样式项目实战：新手入门指南11-11
-
CSS基础知识详解：从入门到实践教程11-05
-
如何用 Jest 测试 CSS Font Loading API（介绍）10-25
-
10 个每个 UI 开发人员都应该知道的 CSS 代码段10-25
-
怎么检测是否已经安装了scss（Sass）-icode9专业技术文章分享10-22
-
TailwindCSS开发入门指南10-22
