文章目录
样式 Style 分类
样式分内部样式,行内样式,外部样式
-
行内样式:写在标签里的Style,例子如下
<div style="width: 200px;height: 200px;background-color: skyblue"></div>
-
内部样式:写在head中style里的样式
-
外部样式:写在外部css文件中,用到的时候需要调用
<head> <!--内部样式:写在head里的style--> <style> /*选择器*/ /*id选择器,唯一,不要以数字开头、不要有中文、不要纯数字*/ /*找id用井号#*/ #div1{ width: 333px; background-color: skyblue; } /*标签选择器,直接写标签名,选中所有标签名的标签*/ div{ } /*类标签 可以选择多个,标签上写class,用.来写*/ .male{ } </style> </head>
CSS 选择器 *
ID选择器:#
ID名字要唯一,不要以数字开头、不要有中文、不要纯数字
#div1{
width: 333px;
background-color: skyblue;
}
标签选择器:tag
直接写标签名,选中所有标签名的标签
div{
width: 333px;
background-color: skyblue;
}
类选择器:.
可以选择多个,标签上写class,用 .
来写
.male{
width: 333px;
background-color: skyblue;
}
并集选择器:,
并集用来把相同属性的标签、类、id等并在一起,用 ,
相连
#div1,.class1,p{/*逗号是并集*/
width: 200px;
height: 200px;
background-color: skyblue;
交集选择器:直接连着写
才算选中它
后代选择器:
后代用空格来表示,父对象
+ 空格
+ 子对象
div p{
width: 200px;
height: 200px;
background-color: skyblue;
}
通配符选择器:*
给全片的样式,通常是去掉页面默认的 margin
和 padding
*{
width: 200px;
height: 200px;
background-color: skyblue;
}
故事 :字体授权,用别人的字体要经过授权 ,一个实习员工去家公司用微软字体,他们的软件很挣钱,但是被微软给告了,因为没有授权(感觉有点扯 )
属性选择器
// js:想找到所有的多选框
var checkBox = document.querySelectorAll('input[type=checkbox]')
同级选择器 +
~
#phoneBtn:active + div{
display: block;
}
伪类 *
鼠标悬浮 :hover
伪类目前学到的是做一些互交,比方说鼠标悬浮到某个元素上时,切换样式,用 hover
。
/*伪类hover*/
#div1:active{/*点击*/
width: 200px;
height: 200px;
background-color: hotpink;
}
#div1:hover{ /*悬浮时切换样式*/
width: 200px;
height: 200px;
background-color: hotpink;
}
选择元素
div li:first-child{}
div li:last-child{}
div li:nth-child(1){color: skyblue;}
,这里面1
可以改成n
、2n
添加元素 After & Before,购物车小票
After 是在子元素的最后面插入
Before 是在子元素的最前面插入
<head>
<meta charset="UTF-8">
<title>after:content</title>
<style>
div{
width: 600px;
height: 100px;
background-color: skyblue;
/**/
position: relative;
}
div:after{
/*内容必须有,不然after不会显示在div中*/
content: "";
display: inline-block;
/*制作小三角*/
border-width: 50px;
border-style: solid;
border-color: transparent transparent transparent #4995eb;
/*定位:子绝父相*/
position: absolute;
top:0;
left: 600px;
}
</style>
</head>
<body>
<div></div>
</body>
实现一个小票的样式
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 300px;
height: 120px;
background-color: pink;
/*父亲相对*/
position: relative;
}
.box::after{
/*内容content是关键,不能没有他*/
content: '';
width: 50px;
height: 50px;
border-radius: 25px;
background-color: white;
/*孩子绝对定位*/
position: absolute;
top: 35px;
right: -25px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
下图是我的思路,当然也可以有别的方法
- 通过
top:0px
,right:0px
定位到右上角 - 然后向右平移
半个直径
:使圆心到盒子右边的边缘。 - 向上平移半个直径,使圆心到盒子的右上角处。
- 然后向下平移半个盒子的高度即可。
公式总结:top:0-半径+(盒子高度/2)
,right:-半径
然后我发现用弹性盒子的垂直居中也可以,省着算了。但是算数的过程还是要想一想的。
.box{
width: 300px;
height: 120px;
background-color: pink;
/*父亲相对*/
display: flex;
position: relative;
align-items: center;
}
.box::after{
/*内容content是关键,不能没有他*/
content: '';
width: 50px;
height: 50px;
border-radius: 25px;
background-color: white;
/*孩子绝对定位*/
position: absolute;
/*top: 35px;*/
right: -25px;
}
修改 a 标签的状态
-
未改之前的状态修改
a:link{ color: skyblue; }
-
已点击之后的状态修改
a:visited{ color: pink; }
-
超链接的下划线
a{ text-decoration: none;/*文字描述,通常是把a标签的下划线去掉*/ }
优先级 & 计算
标签优先级
优先级表降序排列:!important的地位最大 | ||||
---|---|---|---|---|
其次是行级Style | ||||
标签名(优先级降序) | 第一位 | 第二位 | 第三位 | 第四位 |
ID | 0 | 1 | 0 | 0 |
Class类 | 0 | 0 | 1 | 0 |
标签 | 0 | 0 | 0 | 1 |
通配符* | 0 | 0 | 0 | 0 |
- 行内因为不算标签,所以不计算,但是你要知道,他比 !important 要弱一点
- 上表的使用方法就是相加,并集的话是看 style 里的顺序,就近原则,最后写的样式会覆盖掉先前的样式
- 并集不需要优先级的计算
- 继承的优先级最低,比通配符还要低
display:none
会二次渲染,大型项目的话就要少用
符号优先级
一张表解决
文本
文本有以下方法
- 文字居中
#div1{
/*文字居中*/
line-height: 333px; /*文字的垂直居中,和height等高*/
text-align: center; /*水平对齐*/
}
- 文字与图片的对齐方式,
vertical-align: middle;
:让文字根据图片的中间位置对齐
img{
/*图片垂直对齐*/
vertical-align: middle;
}
-
文字间距
letter-spacing: 1px;/*文字的间距*/
-
文字描述
text-decoration: line-through;
文字中间会划一道线。 -
边框
border: 2px skyblue solid;
分别是边框粗细,颜色,和边框线样式(顺序不固定) -
文字在框里,放不下就用省略号代替
/*组合三连击 放不下就用省略号*/ white-space: nowrap; /*永远不换行*/ overflow: hidden; /*超出部分隐藏*/ text-overflow: ellipsis; /*省略号*/
效果如下
-
模糊距离
值分别是x轴位移,y轴位移,模糊度,阴影颜色
text-shadow: 10px 20px 10px skyblue;
效果如下
Background 背景
- 背景图片:用Url来找路径
background-image: url("../../Img/sekiro.png");
- 背景图片填充是否重复(默认重复):
background-repeat: no-repeat;/*不重复*/
- 背景图片大小:
background-size: 100% 100%;
这个是相对于父对象的宽高的
抠雪碧图
思路:建立一个 class 类,这个类是个框框,用来框住每个 icon,然后用 Background-position 水平或垂直移动背景图片,通过谷歌浏览器的开发选项来找到合适的位置,然后回到开发软件中更改数值。
1.首先你手上有张雪碧图类似于这样
2.建立一个小框框,用来抠图,在 Style 里写一个这样的类给 Body 里的 Div
.icon{
width: 23px;
height: 23px;
/*border: 1px red solid;*/
background-image: url("../../Img/icon.gif");
}
3.然后设置 background-position: -4px -2px;
这个背景图片位置来实现抠图,这个位置信息也放在一个类中,然后 body 里的 div 用后代选择器去控制。
<style>
.icon{
width: 23px;
height: 23px;
/*border: 1px red solid;*/
background-image: url("../../Img/icon.gif");
}
.icon1{
background-position: -4px -2px;
}
.icon2{
background-position: -31px -2px;
}
.icon3{
background-position: -58px -2px;
}
.icon4{
background-position: -84px -2px;
}
/*扣雪碧图,用浏览器和手去调试*/
/*块级标签和行内块标签可以,因为他们都有宽高*/
</style>
<body>
<div class="icon icon1"></div>
<div class="icon icon2"></div>
<div class="icon icon3"></div>
<div class="icon icon4"></div>
</body>
行级 & 块级 & 行内块标签
- 行级标签:不会独占一行,不可设置宽高,高度是内容区的高度。
<a href=""></a>
<span></span>
<strong></strong>
<i></i> <!--斜体-->
<br> <!--br被分在行级-->
- 块级标签:独占一行,可设置宽高
<div></div>
<h1></h1>
<p></p>
<ul></ul>
<ol></ol>
<li></li>
<dl></dl>
<dt></dt>
<dd></dd>
<form action=""></form>
<hr>
<header></header> <!--语义化标签之类的-->
- 行内块标签:不会独占一行
<img src="" alt="">
<textarea></textarea>
<button></button>
<input>
<select name="" id=""></select>
table
有自己的分类- 互相转换
display
,有inline
、block
、inline-block
父对象 & 子对象的联系
-
元素有宽100%,继承它的父元素属性,但是没有高度。
<head> <meta charset="UTF-8"> <title>属性继承父对象</title> <style> #Son{ height: 80%; /*这个百分号是和父对象的百分比*/ width: 80%; background-color: skyblue; font-size: 30px; /*字号*/ font-weight: bold; /*字体加粗*/ font-family: "Agency FB"; /*字体*/ font-style: italic;/*斜体*/ opacity: 1;/*透明度,默认是1,ie浏览器不支持*/ } #Father{ height: 300px;/*这个百分号是和父对象的百分比*/ width: 300px; background-color: hotpink; } </style> </head> <body> <div id="Father"> <div id="Son"> 这是一个测试 </div> </div> </body>