自己之前稍微开了一下html5的坑,换一个心情,记录一下自己从0学CSS3遇到的一些知识点
主要的学习资料就还是HTML5+CSS3从入门到精通以及一些网上的资料
选择器
介绍
其实一开始我都没听说过这名词,后来发现就是指# .classname这些定义CSS的方法
就先罗列一下选择器的种类吧,遇到了慢慢学就好:
元素选择器;关系选择器;属性选择器;伪类选择器;伪对象选择器
案例样式
里面会涉及到不少选择器,效果我就不展示了,标一下注释给自己看看
按钮样式
<!DOCTYPE html>
<html lang="en">
<style>
ul{list-style: none;}
a.button{
display: block;float: left;
position: relative;
height: 25px; width: 120px;
margin: 0 10px 18px 0;
text-decoration: none;
font: 12px 'Helvetica Neue',Helvetica,Arial;
font-weight: bold;
line-height: 25px;
text-align: center;
}
.gray{
color:#555;
border-bottom: 4px solid #b2b1b1;
background: #eee;
}
.gray:hover{background: #e2e2e2;}
/*设置元素在其鼠标悬停时的样式*/
a.button:before,a.button:after{
content: '';
height: 25px;
width: 120px;
left: -1px;
bottom: -1px;
position: absolute;
border-radius: 3px;
}
/*伪对象选择器*/
a.button:before{
height: 23px;
bottom: -4px;
border-top: 0;
border-radius: 0 0 3px 3px;
box-shadow: 0 1px 1px 0 #bfbfbf;
/*阴影*/
}
a.button{border-radius: 3px;}
/*圆角*/
</style>
<head>
<meta charset="UTF-8">
<title>按钮</title>
</head>
<body>
<ul id="container">
<li><a href="#" class="button gray">灰色风格按钮</a></li>
<li><a href="#" class="button pink">粉红风格按钮</a></li>
<li><a href="#" class="button blue">蓝色风格按钮</a></li>
<li><a href="#" class="button green">绿色风格按钮</a></li>
<li><a href="#" class="button turquoise">天蓝色风格按钮</a></li>
<li><a href="#" class="button black">黑色风格按钮</a></li>
<li><a href="#" class="button darkgray">深灰色风格按钮</a></li>
<li><a href="#" class="button yellow">黄色风格按钮</a></li>
<li><a href="#" class="button purple">紫色风格按钮</a></li>
<li><a href="#" class="button darkblue">银灰色风格按钮</a></li>
</ul>
</body>
</html>
列表样式
这个样式蛮有意思的,我试着做一个手机上小说的目录,蛮有趣的,但遗憾的是找不到好的背景图,比如显示榜单排名热度的标识,本来是打算标识是有颜色的正好,现在就有点枯燥了
<!DOCTYPE html>
<html lang="en">
<style>
#wrap{
height: 276px;
width: 260px;
}
#wrap ul{
list-style-type: none;
margin: 0;
padding: 0;
font-size: 16px;
color: #777;
}
#wrap li{
line-height: 30px;
padding: 1px 0 0 28px;
}
#wrap li a{
text-decoration: none;
color: #777;
}
#wrap li a:hover{color: #F63;}
#wrap li:first-child{
font-size: 19px;
color: #81736c;
}
/*第一个子元素*/
#wrap li:nth-child(2){font-weight: bold;}
/*第二个子元素*/
</style>
<head>
<meta charset="UTF-8">
<title>列表</title>
</head>
<body>
<div id="wrap">
<ul id="container">
<li>双周热门推荐</li>
<li><a href="#">呐喊</a></li>
<li><a href="#">三体-死神永生</a></li>
<li><a href="#">白菜鸡肉粉丝包</a></li>
<li><a href="#">可爱的xiaoyuyu</a></li>
<li><a href="#">南师虽去,精神永存</a></li>
<li><a href="#">出师表</a></li>
<li><a href="#">高等数学A</a></li>
<li><a href="#">老九门</a></li>
</ul>
</div>
</body>
</html>
还有一些蛮有用的伪类比如:disabled;:enabled;:target;:checked都是挺实用的
文本模块
文字怎么书写其实挺细的,就先介绍一些我自己觉得比较常用的吧,反正也是给自己看的233,案例比较靠谱
案例样式
火焰一般的特效字(text-shadow)
<!DOCTYPE html>
<html lang="en">
<style>
body{background: #000;}
p{
text-align: center;
font: bold 60px helvetica,Arial,sans-serif;
color: red;
text-shadow: 0 0 4px white,
0 -5px 4px #ff3,
-2px -15px 11px #fd3,
2px -25px 18px #f20;
}
</style>
<head>
<meta charset="UTF-8">
<title>Text</title>
</head>
<body>
<div>
<p>HTML+CSS3</p>
</div>
</body>
</html>
content与before和after的配合
这个其实emmmm,我还想不出实际意义,可能所有有相同元素的模块都漏东西没加上,用这一招同意增加还是不错的,就不用麻烦js了
<!DOCTYPE html>
<html lang="en">
<style type="text/css">
a[href $=".pdf"]:after{content: url(xiaoyuyu.jpg)}
a[rel = "external"]:after{content: "xiaoyuyu"}
</style>
<head>
<meta charset="UTF-8">
<title>Content</title>
</head>
<body>
<a href="http://www.book.com/1688.pdf">HTML+CSS从入门到精通</a><br>
<a href="http://www.book.com/1688/" rel="external">HTML+CSS从入门到精通</a>
</body>
</html>
能插入的还蛮多的,string/attr/url,挺实用的
网络字体@font-face
<!DOCTYPE html>
<html lang="en">
<style type="text/css">
@font-face {
font-family: "lexograph";
src: url(http://randsco.com/fonts/lexograph.eot);
src: local("lexographer"),url(http://randsco.com/fonts/lexograph.ttf)format("truetype");
}
h1{
font-family: lexograph,Verdana,sans-serif;
font-size: 4em;
}
</style>
<head>
<meta charset="UTF-8">
<title>Font-face</title>
</head>
<body>
<h1>https://woaixiaoyuyu.github.io/</h1>
</body>
</html>
有些时候会有问题,也很迷,但格式差不多就是这样,反正特殊字体,还是换成图片靠谱点,如果数量不多的话
Background
主要就是背景图的操作,CSS3新增了不少
案列样式
设计优惠券(径向渐变)
<!DOCTYPE html>
<html lang="en">
<style type="text/css">
.stamp{
width: 387px;
height: 140px;
padding: 0 10px;
position: relative;
overflow: hidden;
}
/*before 设计底色*/
.stamp:before{
content: "";
position: absolute;
z-index: -1; /* 让该层在文本层下面*/
top: 0;
bottom: 0;
left: 10px;
right: 10px;
}
/*after 设计底色阴影*/
.stamp:after{
content: "";
position: absolute;
left: 10px;
top: 10px;
right: 10px;
bottom: 10px;
box-shadow: 0 0 20px 1px rgba(0,0,0,0.5);
z-index: -2; /*最底部*/
}
/*设计高亮面*/
.stamp i{
position: absolute;
left: 20%;
top: 45px;
height: 190px;
width: 390px;
background-color: rgba(255,255,255,.15);
transform: rotate(-30deg);
}
/*设计左侧文本*/
.stamp .par{
float: left;
padding: 16px 15px;
width: 220px;
border-right: 2px dashed rgba(255,255,255,.3);
text-align: left;
}
/*文本样式*/
.stamp .par p{
color: #fff;
margin: 6px 0;
}
.stamp .par span{
color: #fff;
margin-right: 5px;
font-size: 50px;
}
.stamp .par .sign{font-size: 34px;}
.stamp .par sub{
position: relative;
top: -5px;
color: rgba(255,255,255,0.8);
}
.stamp .copy{
display: inline-block;
width: 100px;
vertical-align: text-bottom;
color: rgba(255,255,255,1);
padding: 10px 6px 10px 12px;
font-size: 24px;
}
.stamp .copy p{
font-size: 13px;
margin-top: 12px;
margin-bottom: 16px;
}
.stamp .copy a{
background-color: #fff;
color: #333;
font-size: 14px;
text-decoration: none;
text-align: center;
padding: 5px 10px;
border-radius: 4px;
display: block;
}
/*风格*/
/*鹅黄*/
.stamp_yellow{
background: #F39B00;
background: radial-gradient(rgba(0,0,0,0) 0,rgba(0,0,0,0) 5px,#F39B00 5px);
background-size: 15px 15px;
background-position: 9px 3px;
}
.stamp_yellow:before{background-color: #f3c120
}
</style>
<head>
<meta charset="UTF-8">
<title>Lottery</title>
</head>
<body>
<div class="stamp stamp_yellow">
<div class="par">
<p>上品折扣店</p>
<sub class="sign">$</sub><span>50.00</span><sub>优惠券</sub>
<p>订单满 100.00 元</p>
</div>
<div class="copy">副券
<p>2019-02-17<br>
2019-02-23</p>
<a href="#">立即使用</a>
</div>
<i></i>
</div>
</body>
</html>
结果还是不错的,以假乱真哈哈
Hexo链接:https://woaixiaoyuyu.github.io/2019/02/14/CSS3开坑-不定期更新/