-
<!-- css样式生效的优先级是：就近原则-->
-
<!-- css引入的第一种方式-->
-
<style>
-
h1 {
-
font: italic bolder 30px/32px Arial;
-
text-align: center;
-
color: #ffc800;
-
}
-
h2 {
-
/* font属性顺序--可以按顺序设置如下属性：
-
font-style （使用斜体、倾斜或正常字体）
-
font-variant （设置小型大写字母的字体显示文本）
-
font-weight （设置文本的粗细）
-
font-size/line-height （设置字体的尺寸和行高）
-
font-family （规定元素的字体系列）*/
-
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;
-
}
-
/*1、相邻兄弟选择器（匹配指定元素的相邻【下一个】兄弟元素）*/
-
#brother + span {
-
font: italic bold 18px/19px Arial;
-
color: #ff00aa;
-
}
-
/*2、通用兄弟选择器（匹配到某元素【后面的】 【所有指定】兄弟元素）*/
-
/* #brother ~ span{
-
font:italic bold 18px/19px Arial;
-
color: #0073ff;
-
}*/
-
/*3、属性选择器 (属性选择器可以根据元素的属性及属性值来选择元素。)*/
-
span[id] {
-
color: red;
-
}
-
/*4、CSS 后代选择器（后代选择器可以选择作为某元素后代的元素。）*/
-
span em {
-
color: #59ff00;
-
}
-
/*5、CSS子元素选择器（子元素选择器（Child selectors）只能选择作为某元素子元素的元素。）*/
-
span > strong {
-
color: #ff0059;
-
}
-
/*6、结构伪类选择器（:first-child 选择元素中的第一个子元素。:nth-child(n) 定位某个父元素的一个或多个特定的子元素。）*/
-
/*span:first-child {
-
color: #9d54c4;
-
}
-
span:nth-child(2) {
-
color: #9d54c4;
-
}*/
-
#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;
-
}
-
/*列表的css*/
-
#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;
-
}
-
/* 浮动2--解决父级元素塌陷的问题*/
-
#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{
-
font:normal 600 20px/21px Arial;
-
color: #c800ff;
-
background: #ffc800;
-
position:fixed;
-
top:0px;
-
left:0px;
-
right:0px;
-
bottom:0px;
-
padding: 5px;
-
border: 2px solid red;
-
}*/
-
.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>
-
<!-- css引入的第二种方式:内容和表现分离-->
-
<!-- <link rel="stylesheet" href="style.css">-->
-
</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>
