狂神说Java CSS3讲解综合代码
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>狂神说CSS3学习总结</title>
<style>
h1 {
font: italic bolder 30px/32px Arial;
text-align: center;
color: #ffc800;
}
h2 {
font: italic bold 20px/18px arial;
background: aquamarine;
color: #c41b55;
text-align: right;
}
.class1 {
font: italic bold 18px/20px Arial;
background: bisque;
color: olivedrab;
text-align: left;
}
#id01 {
font: italic bold 21px/23px Arial;
background: blue;
color: azure;
text-align: center;
}
.css01 {
text-align: left;
font: italic bold 16px/17px Arial;
background: #b6b657;
color: azure;
}
.css02 {
text-align: left;
background: #00ffcc;
}
#brother + span {
font: italic bold 18px/19px Arial;
color: #ff00aa;
}
span[id] {
color: red;
}
span em {
color: #59ff00;
}
span > strong {
color: #ff0059;
}
#work01 {
text-align: center;
color: red;
}
a[class~="links"] {
float: left;
display: block;
height: 50px;
width: 50px;
border-radius: 10px;
background: #77b177;
color: red;
text-align: center;
text-decoration: none;
margin-right: 20px;
padding: 30px 10px 0px 10px;
}
.css03 {
float: none;
display: inline-block;
}
#id03 {
text-align: left;
color: red;
text-indent: 20px;
letter-spacing: 3px;
font-size: 19px;
line-height: 1.8;
text-decoration: underline;
}
.center {
vertical-align: middle;
}
a[href="#top"] {
text-decoration: none;
color: #474040;
}
a[href="#top"]:hover {
color: #08ff00;
}
a[href="#top"]:active {
color: red;
}
#id05 {
box-shadow: 20px 20px 5px #888888;
}
#nav{
width:300px;
}
.title{
background: red;
color: #0c0c0c;
font:normal 600 18px/30px Arial;
text-align: left;
text-indent: 20px;
margin:0;
}
ul{
background: #8e8e8a;
margin: 0;
}
ul li{
height: 30px;
list-style: none;
text-indent: 1em;
position: relative;
}
li:first-child{
padding:15px 0 0 0;
}
a[href="#"]{
text-decoration:none;
color:#000;
font-size: 14px;
}
a[href="#"]:hover{
color:orange;
text-decoration: underline;
}
.div1{
width: 1400px;
height: 400px;
border: 2px solid red;
background: url("http://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2021%2F0522%2F1c99ececj00qth491000gc000640064c.jpg&thumbnail=650x2147483647&quality=80&type=jpg");
background-repeat:repeat-y;
}
.div2{
width:1300px;
height:300px;
border:3px solid rosybrown;
background-image: linear-gradient(#eef67a, #77ff00);
}
.div3{
width:400px;
height: 200px;
border:2px solid red;
text-align: center;
}
#vip2{
font:normal 600 16px/30px Arial;
background: #3cbda6;
text-align: left;
}
.form{
background: #3cbda6;
}
div:nth-of-type(1) input {
border:2px dotted #3e3b3b;
margin:15px 5px 15px 5px;
}
div:nth-of-type(2) input{
border:2px solid red;
padding: 10px 10px 10px 10px;
border-radius: 10px;
box-shadow: 10px 10px 10px yellow;
}
.div4{
width: 1300px;
height: 300px;
}
.ul1{
height: 100px;
background: rgba(248, 246, 246, 0.78);
margin: 0;
}
.ul1 li{
display: inline-block;
}
.ul1 li a{
font:normal 600 40px/50px Arial;
color: red;
}
#father{
border: 2px dashed red;
}
#father:after{
content: '';
display: block;
clear: both;
}
.layer01{
border:2px solid #5ccd6b;
margin:5px;
display: inline-block;
float: left;
}
.layer02{
border:2px solid #cdb15c;
margin: 5px;
display: inline-block;
float:right;
}
.layer03{
border:2px solid #7d3fc4;
margin:5px;
display: inline-block;
float:right;
}
.layer04{
border:2px solid #7d3fc4;
margin:8px;
font:normal 600 20px/23px Arial;
display: inline-block;
float:left;
clear:both;
}
#id06{
font:normal 600 18px/19px Arial;
color:red;
position: relative;
right:-50px;
}
#id07{
position: absolute;
top:3750px;
z-index: -1;
}
.id08{
position: -webkit-sticky;
position: sticky;
top: 0px;
padding: 5px;
background-color: #cae8ca;
border: 2px solid #4CAF50;
}
.homeWork01{
width: 250px;
height: 250px;
font:normal 600 15px/18px Arial;
background: #a7317b;
color: #f0f1f0;
float: left;
text-align: center;
line-height: 250px;
}
.work01 a{
text-decoration: none;
color:red;
}
.homeWork02{
width: 250px;
height: 250px;
font:normal 600 15px/18px Arial;
background: #a7317b;
color: #f0f1f0;
float: right;
text-align: center;
line-height: 250px;
}
.homeWork03{
width: 250px;
height: 250px;
font:normal 600 15px/18px Arial;
background: #a7317b;
color: #f0f1f0;
clear: both;
text-align: center;
line-height: 250px;
margin: 0 auto;
}
.homeWork04{
width: 250px;
height: 250px;
font:normal 600 15px/18px Arial;
background: #a7317b;
color: #f0f1f0;
float: left;
text-align: center;
line-height: 250px;
}
.homeWork05{
width: 250px;
height: 250px;
font:normal 600 15px/18px Arial;
background: #a7317b;
color: #f0f1f0;
float: right;
text-align: center;
line-height: 250px;
}
</style>
</head>
<body>
<div>
<h1>狂神说java系列，CSS3的学习</h1>
<h2>三大基本选择器</h2>
<p>三大基本选择器，标签选择器demo---style样式测试----font属性顺序--可以按顺序设置如下属性</p>
<p class="class1">三大基本选择器，calss选择器的demo-----id选择器>类选择器>标签选择器</p>
<p id="id01">三大基本选择器，id选择器的demo-------id选择器>类选择器>标签选择器</p>
<p id="id02">三大基本选择器的优先级：id选择器>类选择器>标签选择器</p>
</div>
<div>
<p class="css01">
<span>link和导入的生效的优先级------css样式生效的优先级是：就近原则</span>
<span>1.link属于HTML标签，而@import是CSS提供的一种方式</span></br>
<span>2.@import有次数限制，只能引入31次</span></br>
<span>3.当页面被加载时，link引用的CSS会同时被加载，而@import引用的CSS则是等待主页面全部被加载完后才会被加载，所以当网速较慢时，可能会只出现页面而没有样式，等一段时间后样式才会被加载出来</span></br>
<span>4.@import 只能在IE5以上才能使用，否则不识别，而link则没有这个问题</span></br>
<span>5.当使用javascript控制DOM(document.styleSheets)去改变样式时，只能使用link，DOM不能控制@import</span></br>
</p>
</div>
<div>
<p class="css02">
<p id="brother"></p>
<span>高级选择器</span></br>
<span>1、相邻兄弟选择器（匹配指定元素的相邻【下一个】兄弟元素）</span></br>
<span>2、通用兄弟选择器（匹配到某元素【后面的】 【所有指定】兄弟元素）</span></br>
<span id="attribute">3、属性选择器 (属性选择器可以根据元素的属性及属性值来选择元素。)</span></br>
<span>4、<em>CSS 后代选择器</em>（后代选择器可以选择作为某元素后代的元素。）</span></br>
<span><strong>5、CSS</strong> <strong>子元素选择器</strong>（子元素选择器（Child selectors）只能选择作为某元素子元素的元素。）</span></br>
<span>6、结构伪类选择器
<p>1、:first-child 选择元素中的第一个子元素。</p>
<p>2、:nth-child(n) 定位某个父元素的一个或多个特定的子元素。其中 n 是其参数。n 取值如下：</p>
</span></br>
</p>
</div>
<div>
<h1 id="work01">属性选择器练习，八个方块填色</h1>
</div>
<div>
<a href="www.baidu.com" class="links item first" id="first">1</a>
<a href="www.kuangstudy.com" class="links item active" target="_blank" title="狂神说Java">2</a>
<a href="www.image/123.jpg" class="links item">3</a>
<a href="www.image/123.npg" class="links item">4</a>
<a href="www.image/122.jpg" class="links item">5</a>
<a href="www.image/666.jpg" class="links item">6</a>
<a href="www/image/777.jpg" class="links item">7</a>
<a href="www/image/888.jpg" class="links item">8</a>
</div>
<div class="css03">
<h1>文本样式练习</h1>
<p id="id03">该文本使用某些文本格式属性来设置样式。标题使用 text-align、text-transform 和 color
属性。段落缩进、对齐，并指定了字符间距。然后从这个彩色的“亲自试一试”链接中删除了下划线。text-indent 属性用于指定文本第一行的缩进。letter-spacing 属性用于指定文本中字符之间的间距。</p>
</div>
<div>
<h1>图片和字体对齐</h1>
<p>
<img src="https://5b0988e595225.cdn.sohucs.com/q_70,c_zoom,w_640/images/20181117/e6d62d5178044221a0e32ab65f85bd14.jpeg"
alt="天海佑希" class="center" height="150px" width="150px">
<span>1985年以第一名成绩考入宝冢音乐学校，1987年毕业后加入宝冢歌剧团。</span>
</p>
</div>
<div>
<h1>超链接伪类</h1>
<p>
<a href="#top"><img src="https://static001.infoq.cn/resource/image/22/7a/225fbf05add13cf24dd72983e0f9e47a.jpeg"
alt="码出高效" height="150px" width="150px" id="id05"></a></br>
</p>
<p>
<a href="#top">名字：码出高效</a></br>
</p>
<p>
<a href="#top">作者：孤尽</a></br>
</p>
<P>
<a href="#top">价格：¥99</a></br>
</P>
</div>
<div>
<h1>列表</h1>
</div>
<div id="nav">
<h2 class="title">全部商品分类</h2>
<ul>
<li><a href="#">图书</a>  <a href="#">音像</a>  <a href="#">数字商品</a></li>
<li><a href="#">家用电器</a>  <a href="#">手机</a>  <a href="#">数码</a></li>
<li><a href="#">电脑</a>  <a href="#">办公</a></li>
<li><a href="#">家居</a>  <a href="#">家装</a>  <a href="#">厨具</a></li>
<li><a href="#">服饰鞋帽</a>  <a href="#">个护化妆</a></li>
<li><a href="#">礼品箱包</a>  <a href="#">钟表</a>  <a href="#">珠宝</a></li>
<li><a href="#">食品饮料</a>  <a href="#">保健食品</a></li>
<li><a href="#">彩票</a>  <a href="#">旅行</a>  <a href="#">充值</a>  <a href="#">票务</a>
</li>
</ul>
</div>
<div>
<h1>图片背景--垂直排列</h1>
</div>
<div class="div1">
</div>
<div>
<h1>渐变</h1>
</div>
<div class="div2">
<h3>渐变背景</h3>
</div>
<div>
<h1>盒子模型</h1>
</div>
<div class="div3">
<h2 id="vip2">会员登录</h2>
<form action="post" class="form">
<div>
<span>用户名：</span>
<input type="text">
</div>
<div>
<span>密码：</span>
<input type="password">
</div>
</form>
</div>
<div>
<h1>浮动1</h1>
</div>
<div class="div4">
<ul class="ul1">
<li><a href="#">首页</a></li>
<li><a href="#">新闻聚焦</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">企业文化</a></li>
<li><a href="#">招才纳贤</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</div>
<div>
<h1>浮动2</h1>
</div>
<div id="father">
<div class="layer01">
<img src="https://twemoji.maxcdn.com/v/13.1.0/72x72/1f4af.png" alt="">
</div>
<div class="layer02">
<img src="http://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2021%2F0522%2F1c99ececj00qth491000gc000640064c.jpg&thumbnail=650x2147483647&quality=80&type=jpg" alt="">
</div>
<div class="layer03">
<img src="https://twemoji.maxcdn.com/v/13.1.0/72x72/1f601.png" alt="">
</div>
<div class="layer04">
浮动的盒子可以向左浮动，也可以向右浮动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
</div>
</div>
<div>
<h1>定位（相对、绝对、固定）</h1>
</div>
<div class="sticky">
<p id="id06">relative相对定位元素的定位是相对其正常位置。</p>
<p id="id07"><img src="http://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2021%2F0522%2F1c99ececj00qth491000gc000640064c.jpg&thumbnail=650x2147483647&quality=80&type=jpg" alt=""></p>
<div class="id08"><p>position: sticky; 基于用户的滚动位置来定位</p></div>
</div>
<div>
<h1>方块定位练习</h1>
</div>
<div class="work01">
<div class="homeWork01">
<a href="#work" id="href01">链接1</a>
</div>
<div class="homeWork02">
<a href="#work">链接2</a>
</div>
<div class="homeWork03">
<a href="#work">链接3</a>
</div>
<div class="homeWork04">
<a href="#work">链接4</a>
</div>
<div class="homeWork05">
<a href="#work">链接5</a>
</div>
</div>
</body>
</html>```
本文详细介绍了CSS3中的选择器，包括基本选择器、高级选择器、属性选择器以及伪类选择器的用法，并通过实例演示了如何设置字体、颜色、背景、布局等样式。此外，还讨论了CSS样式的优先级、浮动、定位、盒模型以及渐变背景等内容，帮助读者深入理解CSS3在网页设计中的应用。
扫一扫
392
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
