CSS教程
css
层叠样式表，给html标签添加样式
注释：
/*单行注释*/ /* 多行注释 多行注释 */
css的结构语法
选择器 {
属性1:值1;
属性2:值2;
属性3:值3;
属性4:值4;
}
css的三种引入方式
第一种：行内式
<h1 style="color:red">
hello
</h1>
第二种：外链式
<link rel="stylesheet" href="mycss.css">
第三种：内部式
<style>
h1{
color:red
}
</style>
一、CSS选择器
1、基本选择器
id选择器，类选择器，标签选择器，通用选择器
<style>
/*id选择器*/
#d1{
width: 200px;
height: 200px;
background-color: darkgreen;
}
/*类选择器*/
.d2{
width: 200px;
height: 200px;
background-color: red;
}
/*标签选择器*/
span{
width:120px;
height:20px;
}
/*通配符选择器*/
*{
color:red
}
</style>
<body>
<div id="d1"></div>
<div class="d2"></div>
<span></span>
</body>
2、组合选择器
后代选择器，儿子选择器，毗邻选择器，弟弟选择器
后代选择器
<style>
ol li {
color: green;
}
ol li a {
color: red;
}
.nav li a {
color: indigo;
}
</style>
</head>
<body>
<ol>
<li>我是ol的孩子</li>
<li>我是ol的孩子</li>
<li>我是ol的孩子</li>
<li><a href="#">我是孙子</a></li>
</ol>
<ul>
<li>我是ul的孩子</li>
<li>我是ul的孩子</li>
<li>我是ul的孩子</li>
</ul>
<ul class="nav">
<li>我是ul的孩子</li>
<li>我是ul的孩子</li>
<li>我是ul的孩子</li>
<li><a href="#">我是孙子</a></li>
<li><a href="#">我是孙子</a></li>
</ul>
</body>
儿子选择器
<style>
div>span{
color:red
}
</style>
<body>
<div>
<span></span>
</div>
<span></span>
</body>
<style>
/*毗邻选择器*/
div+span { !*同级别紧挨着的下面的第一个*!
color: aqua;
}
/*弟弟选择器*/
div~span { /*同级别下面所有的span*/
color: red;
}
</style>
3、属性选择器
1 、含有某个属性
2 、含有某个属性并且有某个值
3 、含有某个属性并且有某个值的某个标签
<style>
/*[username] { !*将所有含有属性名是username的标签背景色改为红色*!*/
background-color: red;
}
/*[username='j'] { !*找到所有属性名是username并且属性值是jason的标签*!*/
background-color: orange;
}
/*input[username='j'] { !*找到所有属性名是username并且属性值是j的input标签*!*/
background-color: wheat;
}
</style>
4、分组与嵌套
<style>
div,p,span { /*逗号表示并列关系*/
color: yellow;
}
#d1,.c1,span {
color: orange;
}
</style>
5、伪类选择器
伪类选择器主要是针对a标签
为确保链接伪类选择器要按照顺序来声明
a:link a:visited a:hover a:avtive
a链接在浏览器中具有默认样式，实际工作中都会给链接单独指定样式
a:link 选择所有未被访问的链接 常用
a:visited 选择所有已被访问的链接
a:hover 选择鼠标指针位于其上的链接 常用
a:avtive 选择活动链接(鼠标按下未弹起的链接)
a:link {
元素：属性；
}
focus伪类选择器用于选取焦点的表单元素
input:focus{
background-color:yellow;
}
6、伪元素选择器
<style>
p:first-letter {
font-size: 48px;
color: orange;
}
p:before { /*在文本开头 同css添加内容*/
content: '你说的对';
color: blue;
}
p:after {
content: '你也说得对';
color: orange;
}
before和after通常都是用来清除浮动带来的影响:父标签塌陷的
</style>
7、选择器优先级
当同一个元素指定多个选择器，就会有优先级的产生。
选择器相同，则执行层叠性
层叠性原则：
就近原则，哪个样式离结构近，就执行哪个样式。
选择器不相同，则根据选择器权重执行
选择器 选择器权重
继承或者* 0,0,0,0
元素选择器 0,0,0,1
类选择器，伪类选择器 0,0,1,0
ID选择器 0,1,0,0
行内样式 style=“, 1.0.0.0
!important 重要的 无穷大
二、CSS属性
1、长、宽
块级标签可以设置长宽
行内标签无法设置长宽，即使设置了也不会生效。
2、字体属性
<style>
p{ /*设置多个字体，如果第一个字体没有效果，就会用第二个*/
font-family:"Arial Black","微软雅黑","...";
font-size:24px;
/*字体粗细 inherit：继承父元素的粗细值*/
font-weight:bolder;
color:red;/*英文单词或者十六进制或者rgb值*/
/*rgba(23, 128, 91, 0.9); !*第四个参数是颜色的透明度 范围是0-1*/
}
</style>
3、文字属性
<style>
p{
/*left,right*/
text-align:center;
/*overline,line-through*/
text-decoration:underline;
/*一般是给a标签去下划线的*/
text-decoration:none;
text-indent: 32px; /*首行缩进32px，两个字的大小*/
}
</style>
4、背景图片
<style>
p{
background-color;/*背景颜色*/
background-image:none/url(绝对路径、相对路径)
/*repeat-x:背景图片在横线上平铺,repeat-y：背景图片在纵线上平铺*/
background-repeat {no-repeat/repeat-x/repeat-y}
/*x,y指的是坐标可以使用方位名词或者精确单位
position:top,center,bottom,left,center,right
*/
background-positition:x y;
/*scroll:背景图像是随对象内容滚动,fixed:背景图像固定*/
background-attachment:scroll fixed
/*background：背景颜色，背景图片地址，背景平铺，背景图像滚动，背景图片位置*/
}
</style>
5、边框
<style>
p{
/*可以给四个边框设置不同的颜色，宽度，样式*/
border-color:red;
/*dashed,dotted,double,none*/
border-style:solid;
border-width:5px;
/*简写*/
border:2px solid #a1a1a1;
border-radius：50%;
}
</style>
border-radius - 指定每个圆角
如果在 border-radius 属性中只指定一个值，那么将生成 4 个 圆角。
但是，如果你要在四个角上一一指定，可以使用以下规则：
- 四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。
- 三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
- 两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角
- 一个值： 四个圆角值相同
6、display属性
1、隐藏标签不展示到前端页面并且原来的位置也不再占有了 但是还存在于文档上
display:none;
2、标签转换
<style>
p{
visibility: hidden;/*单纯的隐藏，位置还在*/
display:inline; /*将标签转换为行内标签*/
display:block;/*将标签转换为块级标签*/
display:inline-block;/*转换为行内块标签*/
}
</style>
7、盒子模型
组成：边框，外边框，内边距，实际内容
margin：外边距，盒子与盒子之间的内容
padding：内边距，边框与内容之间的距离
margin与padding都有上下左右值
margin:25px 50px 75px 100px;
- 上边距为25px
- 右边距为50px
- 下边距为75px
- 左边距为100px
margin:25px 50px 75px;
- 上边距为25px
- 左右边距为50px
- 下边距为75px
margin:25px 50px;
- 上下边距为25px
- 左右边距为50px
margin:25px;
- 所有的4个边距都是25px
margin:0 auto; 水平居中
一般情况在写页面的时候，上来就会先将body的margin去除
8、浮动
float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含快或者另一个浮动框的边缘。
选择器 {float:属性值；}
right :元素向右浮动
none ：元素不浮动，默认值
left：元素向左浮动
加了浮动之后的元素，会具有很多特性：
1，浮动元素会脱离标准流
2，浮动的元素会一行内显示并且元素顶部对齐
3，浮动的元素会具有行内块元素的特性
设置了浮动的元素最重要的特性：
1.脱离标准普通流的控制，移动到指定位置，俗称脱标
2.浮动的盒子不在保留原先的位置。
设计到页面的布局一般都是用浮动来提前规划好
清除浮动
原因：元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。
通用的解决浮动带来的影响方法
.clearfix:after {
content: '';
display: block;
clear:both;
}
/*
在写html页面之前 先提前写好处理浮动带来的影响的 css代码
加 class=“clearfix
*/
9、定位
定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住某个盒子。
定位：将盒子定在某一个位置。
定位=定位模式+边偏移
定位模式：用于指定一个元素在文档中的定位方式。
边偏移：决定了该元素的最终位置。
定位模式：
static :静态定位：所有的标签都是静态的，是无法改变的
relative ：相对定位：相对于标签原来的位置做移动
absolute ：绝对定位：相对于已经定位过的父标签做移动(如果没有父标签那么就以body为参照)
fixed：固定定位：相对于浏览器窗口固定在某个位置
边偏移就是定位的盒子移动到最终的位置，有top bottom left right四个属性
相对定位
1、相对定位是元素在移动位置的时候，是相对于它原来的位置来说明的。
2、原来在标准流的位置继续流动占有，后面的盒子任然以标准流的方式对待，不脱标，继续保留原来的盒子。
绝对定位
1、绝对定位是元素在移动的时候，是相对于它祖先元素来说的。
2、如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位。
3、如果祖先元素有定位(相对，绝对，固定定位)，则以最近一级的有定位祖先元素为参考点移动位置。
4、绝对定位不在占有原先的位置。(脱标)
固定定位：
1、以浏览器的可视窗口为参照点移动元素。
与父元素没有关系，不随滚动条滚动。
2、固定定位不在占有原先的位置。
固定定位也是脱标的，其实固定定位也可以看作是一种特殊的绝对定位。
子绝父相：
子级是绝对定位的话，父级要用相对定位
子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个为地方，不会影响其他的兄弟盒子
父盒子需要加定位限制子盒子在父盒子里面内显示
父盒子不能加绝对定位，父盒子布局时，需要占有位置，因此父亲只能是相对定位
10、溢出
<style>
p {
height: 100px;
width: 50px;
border: 3px solid red;
/*overflow: visible; !*默认就是可见 溢出还是展示*!*/
/*overflow: hidden; !*溢出部分直接隐藏*!*/
/*overflow: scroll; !*设置成上下滚动条的形式*!*/
/*overflow: auto;*/
}
</style>
11、z-index模态框
多个盒子叠放的顺序
eg:百度登陆页面 其实是三层结构
1.最底部是正常内容(z=0) 最远的
2.黑色的透明区(z=99) 中间层
3.白色的注册区域(z=100) 离用户最近
<style>
body {
margin: 0;
}
.cover {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5);
z-index: 99;
}
.modal {
background-color: white;
height: 200px;
width: 400px;
position: fixed;
left: 50%;
top: 50%;
z-index: 100;
margin-left: -200px;
margin-top: -100px;
}
</style>
</head>
<body>
<div>这是最底层的页面内容</div>
<div class="cover"></div>
<div class="modal">
<h1>登陆页面</h1>
<p>username:<input type="text"></p>
<p>password:<input type="text"></p>
<button>点我点我~</button>
</div>
</body>
12、透明度
不单单可以修改颜色的透明度还同时修改字体的透明度
rgba只能影响颜色
而opacity可以修改颜色和字体
opacity: 0.5;
-
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
