CSS学习
<p><span style="background-color: rgba(255, 255, 255, 1)"><strong>CSS学习</strong></span></p><p><span style="background-color: rgba(0, 255, 0, 1)">1、我的第一个CSS程序</span></p>
<p><span style="background-color: rgba(255, 0, 255, 1)">style.css：</span></p>
<p>h1{</p>
<pre><em> color: red;<br>}<br><span style="background-color: rgba(255, 0, 255, 1)">index.html：<span style="background-color: rgba(255, 255, 255, 1)"><br><br></span></span></em></pre>
<pre><!DOCTYPE html><br><html lang="en"><br><head><br> <meta charset="UTF-8"><br> <title>Title</title><br> <span style="background-color: rgba(255, 255, 0, 1)"> <!--规范，<style>可以编写css的代码，每一个声明最好使用分；结尾！</span><br><span style="background-color: rgba(255, 255, 0, 1)"> 语法：</span><br><span style="background-color: rgba(255, 255, 0, 1)"> 选择器{</span><br><span style="background-color: rgba(255, 255, 0, 1)"> 声明1；</span><br><span style="background-color: rgba(255, 255, 0, 1)"> 声明2；</span><br><span style="background-color: rgba(255, 255, 0, 1)"> 声明3；</span><br><span style="background-color: rgba(255, 255, 0, 1)"> }</span><br><span style="background-color: rgba(255, 255, 0, 1)"> --></span><br><span style="background-color: rgba(0, 255, 255, 1)"><link rel="stylesheet" href="css/style.css"></span><br></head><br><body><br><br><h1>我是标题</h1><br></body><br></html><br><span style="background-color: rgba(0, 255, 0, 1)">2、导入方式<br><span style="background-color: rgba(255, 0, 255, 1)">index1：<br></span></span></pre>
<pre><head><br> <meta charset="UTF-8"><br> <title></title><br><br><span style="background-color: rgba(255, 255, 0, 1)"> <!--内部样式--></span><br> <style><br> <span style="background-color: rgba(0, 255, 255, 1)"> h1{</span><br><span style="background-color: rgba(0, 255, 255, 1)"> color: green;</span><br><span style="background-color: rgba(0, 255, 255, 1)"> }</span><br> </style><br><span style="background-color: rgba(255, 255, 0, 1)"> <!--外部样式--></span><br> <link rel="stylesheet" href="css/style.css"><br><span style="background-color: rgba(0, 255, 255, 1)"><!--外部样式两种写法</span><br><span style="background-color: rgba(0, 255, 255, 1)">1、链接式：</span><br><span style="background-color: rgba(0, 255, 255, 1)"> <link rel="stylesheet" href="css/style.css"></span><br><span style="background-color: rgba(0, 255, 255, 1)">2、导入式：css2.0@--></span><br><span style="background-color: rgba(0, 255, 255, 1)"> <style></span><br><span style="background-color: rgba(0, 255, 255, 1)"> h1{</span><br><span style="background-color: rgba(0, 255, 255, 1)"> color: green;</span><br><span style="background-color: rgba(0, 255, 255, 1)"> }</span><br> </style><br><br></head><br><body><br><span style="background-color: rgba(0, 255, 255, 1)"> <!--优先级：行内样式>内部样式>外部样式</span><br><span style="background-color: rgba(0, 255, 255, 1)"> 就近原则，谁离“h1”这个元素最近就用它！</span><br><span style="background-color: rgba(0, 255, 255, 1)"> --></span><br><span style="background-color: rgba(255, 255, 0, 1)"><!--行内样式：在标签元素中，编写一个style属性，编写样式即可--></span><br><h1style color="read">我是标题</h1style><br></body><br></html><br><span style="background-color: rgba(255, 0, 255, 1)">index2：</span></pre>
<pre><!DOCTYPE html><br><html lang="en"><br><head><br> <meta charset="UTF-8"><br> <title>Title</title><br><span style="background-color: rgba(255, 255, 0, 1)"><!--外部样式：导入式--></span><br> <span style="background-color: rgba(0, 255, 255, 1)"><style></span><br><span style="background-color: rgba(0, 255, 255, 1)"> @import url(css/style.css);</span><br><span style="background-color: rgba(0, 255, 255, 1)"> </style></span><br></head><br><body><br><br><br><span style="background-color: rgba(0, 255, 255, 1)"><h1>狂神说java</h1></span><br></body><br></html></pre>
<pre><span style="background-color: rgba(0, 255, 0, 1)">3、基本选择器<br><span style="background-color: rgba(255, 0, 255, 1)">1.标签选择器<br><br></span></span></pre>
<pre><!DOCTYPE html><br><html lang="en"><br><head><br> <meta charset="UTF-8"><br> <title>Title</title><br><br> <style><br> <span style="background-color: rgba(255, 255, 0, 1)"> /*标签选择器，会选择页面上所有的这个标签的元素*/</span><br> <span style="background-color: rgba(0, 255, 255, 1)"> h1{</span><br><span style="background-color: rgba(0, 255, 255, 1)"> color: #a13d30;</span><br><span style="background-color: rgba(0, 255, 255, 1)"> background: #32b578;</span><br><span style="background-color: rgba(0, 255, 255, 1)"> border-radius: 24px;</span><br><span style="background-color: rgba(0, 255, 255, 1)"> }</span><br> <span style="background-color: rgba(0, 255, 255, 1)"> p{</span><br><span style="background-color: rgba(0, 255, 255, 1)"> font-size: 80px;</span><br><span style="background-color: rgba(0, 255, 255, 1)"> }</span><br> <span style="background-color: rgba(255, 255, 0, 1)"> /*标签选择器的弊端：若只想要第一个h1变色，第二个不变，没有办法分开*/</span><br> </style><br></head><br><body><br><br><br><span style="background-color: rgba(0, 255, 255, 1)"><h1>学java</h1></span><br><span style="background-color: rgba(0, 255, 255, 1)"><h1>学java</h1></span><br><span style="background-color: rgba(0, 255, 255, 1)"><p>听老师说</p></span><br><br></body><br></html><br><span style="background-color: rgba(0, 255, 0, 1)"><span style="background-color: rgba(255, 0, 255, 1)">2.类选择器</span><br></span></pre>
<pre><!DOCTYPE html><br><html lang="en"><br><head><br> <meta charset="UTF-8"><br> <title>Title</title><br> <style><br> <span style="background-color: rgba(255, 255, 0, 1)">/*类选择器的格式，.class的名称{}</span><br> <span style="background-color: rgba(255, 255, 0, 1)">好处，可以多个标签gui归类，是同一个class，可以复用，可跨标签使用。</span><br><br><span style="background-color: rgba(255, 255, 0, 1)"> */</span><br> <span style="background-color: rgba(0, 255, 255, 1)"> .qinjiang{</span><br><br><span style="background-color: rgba(0, 255, 255, 1)"> color: #1442db;</span><br><span style="background-color: rgba(0, 255, 255, 1)"> }</span><br><span style="background-color: rgba(0, 255, 255, 1)"> .kuangshen{</span><br><span style="background-color: rgba(0, 255, 255, 1)"> color: #af69c9;</span><br><br><span style="background-color: rgba(0, 255, 255, 1)"> }</span><br><br> </style><br></head><br><body><br><br><br><span style="background-color: rgba(0, 255, 255, 1)"><h1 class="qinjiang">标签1</h1></span><br><span style="background-color: rgba(0, 255, 255, 1)"><h1 class="kuangshen">标签2</h1></span><br><span style="background-color: rgba(0, 255, 255, 1)"><h1 class="qinjiang">标签3</h1></span><br><span style="background-color: rgba(0, 255, 255, 1)"><p class="qinjiang">p标签</p></span><br></body><br></html></pre>
<pre><span style="background-color: rgba(255, 0, 255, 1)">3.id选择器</span></pre>
<pre><!DOCTYPE html><br><html lang="en"><br><head><br> <meta charset="UTF-8"><br> <title>Title</title><br> <style><br> <span style="background-color: rgba(255, 255, 0, 1)"> /*id选择器：id必须保证全局唯一！</span><br><span style="background-color: rgba(255, 255, 0, 1)"> #id名称{}</span><br><span style="background-color: rgba(255, 255, 0, 1)"> 优先级：</span><br><span style="background-color: rgba(255, 255, 0, 1)"> 不遵循就近原则，固定的</span><br><span style="background-color: rgba(255, 255, 0, 1)"> id选择器 > class选择器 > 标签选择器</span><br><span style="background-color: rgba(255, 255, 0, 1)"> */</span><br> <span style="background-color: rgba(0, 255, 255, 1)"> #qinjiang{</span><br><span style="background-color: rgba(0, 255, 255, 1)"> color: #ff008a;</span><br><span style="background-color: rgba(0, 255, 255, 1)"> }</span><br><span style="background-color: rgba(0, 255, 255, 1)"> .styl1{</span><br><span style="background-color: rgba(0, 255, 255, 1)"> color: #02ff00;</span><br><span style="background-color: rgba(0, 255, 255, 1)"> }</span><br><span style="background-color: rgba(0, 255, 255, 1)"> h1{</span><br><span style="background-color: rgba(0, 255, 255, 1)"> color: #2d1dc1;</span><br><span style="background-color: rgba(0, 255, 255, 1)"> }</span><br> </style><br> <br></head><br><span style="background-color: rgba(153, 51, 102, 1)"><body></span><br><br><span style="background-color: rgba(0, 255, 255, 1)"><h1 class="styl1" id="qinjiang">标题1</h1></span><br><span style="background-color: rgba(0, 255, 255, 1)"><h1 class="styl1">标题2</h1></span><br><span style="background-color: rgba(0, 255, 255, 1)"><h1 class="styl1">标题3</h1></span><br><h1>标题4</h1><br><h1>标题5</h1><br><br><br></body><br></html></pre>
<pre><span style="background-color: rgba(0, 255, 0, 1)">4、层次选择器<br></span><span style="background-color: rgba(255, 0, 255, 1)">index：<br></span></pre>
<pre><!DOCTYPE html><br><html lang="en"><br><head><br> <meta charset="UTF-8"><br> <title>Title</title><br> <style><br> /*p{*/<br> /* background: green;*/<br> /*}*/<br> <span style="background-color: rgba(255, 255, 0, 1)">/*后代选择器*/</span><br><span style="background-color: rgba(255, 255, 153, 1)"> /* body <span style="background-color: rgba(0, 255, 0, 1)">（空）</span>p{*/</span><br><span style="background-color: rgba(255, 255, 153, 1)"> /* background: red;*/</span><br><span style="background-color: rgba(255, 255, 153, 1)"> /* }*/</span><br><span style="background-color: rgba(255, 255, 0, 1)"> /*子选择器*/</span><br><span style="background-color: rgba(255, 255, 153, 1)"> /* body<span style="background-color: rgba(0, 255, 0, 1)">></span>p{*/</span><br><span style="background-color: rgba(255, 255, 153, 1)"> /* background: #3cbda6;*/</span><br><span style="background-color: rgba(255, 255, 153, 1)"> /* }*/</span><br><span style="background-color: rgba(255, 255, 0, 1)"> /*相邻兄弟选择器:只有一个，相邻（向下）*/</span><br><span style="background-color: rgba(255, 255, 153, 1)"> /* <span style="background-color: rgba(0, 255, 0, 1)"> .</span>active<span style="background-color: rgba(0, 255, 0, 1)"> + </span>p{*/</span><br><span style="background-color: rgba(255, 255, 153, 1)"> /* background:#a13d30;*/</span><br><span style="background-color: rgba(255, 255, 153, 1)"> /* }*/</span><br><span style="background-color: rgba(255, 255, 0, 1)"> /*通用兄弟选择器：当前选中元素的向下的所有兄弟元素*/</span><br><span style="background-color: rgba(255, 255, 153, 1)"> /* <span style="background-color: rgba(0, 255, 0, 1)"> .</span>active<span style="background-color: rgba(0, 255, 0, 1)">~</span>p{*/</span><br><span style="background-color: rgba(255, 255, 153, 1)"> /* background: #02ff00;*/</span><br><span style="background-color: rgba(255, 255, 153, 1)"> /* }*/</span><br><br> </style><br></head><br><span style="background-color: rgba(153, 51, 102, 1)"><body></span><br><span style="background-color: rgba(0, 255, 255, 1)"><p>p0</p></span><br><span style="background-color: rgba(0, 255, 255, 1)"><p class="active">p1</p></span><br><span style="background-color: rgba(0, 255, 255, 1)"><p>p2</p></span><br><span style="background-color: rgba(0, 255, 255, 1)"><p>p3</p></span><br><span style="background-color: rgba(0, 255, 255, 1)"><ul></span><br><span style="background-color: rgba(0, 255, 255, 1)"> <li></span><br><span style="background-color: rgba(0, 255, 255, 1)"> <p>p4</p></span><br><span style="background-color: rgba(0, 255, 255, 1)"> </li></span><br><span style="background-color: rgba(0, 255, 255, 1)"> <li></span><br><span style="background-color: rgba(0, 255, 255, 1)"> <p>p5</p></span><br><span style="background-color: rgba(0, 255, 255, 1)"> </li></span><br><span style="background-color: rgba(0, 255, 255, 1)"> <li></span><br><span style="background-color: rgba(0, 255, 255, 1)"> <p>p6</p></span><br><span style="background-color: rgba(0, 255, 255, 1)"> </li></span><br><span style="background-color: rgba(0, 255, 255, 1)"></ul></span><br><span style="background-color: rgba(0, 255, 255, 1)"><p class="active">p7</p></span><br><span style="background-color: rgba(0, 255, 255, 1)"><p>p8</p></span><br></ul></body><br></html></pre>
<pre><span style="background-color: rgba(0, 255, 0, 1)">5、结构伪类选择器</span><br><span style="background-color: rgba(255, 0, 255, 1)">index：<br></span></pre>
<pre><!DOCTYPE html><br><html lang="en"><br><head><br> <meta charset="UTF-8"><br> <title>Title</title><br> <span style="background-color: rgba(255, 255, 0, 1)"> <!--避免使用，class，id选择器--></span><br> <style><br> <span style="background-color: rgba(255, 255, 0, 1)">/*ul的第一个子元素*/</span><br> <span style="background-color: rgba(0, 204, 255, 1)"> ul li:first-child{</span><br><span style="background-color: rgba(255, 255, 153, 1)"> background: #02ff00;</span><br><span style="background-color: rgba(255, 255, 153, 1)"> }</span><br> <span style="background-color: rgba(255, 255, 0, 1)">/*ul的最后一个子元素*/</span><br><span style="background-color: rgba(0, 204, 255, 1)"> ul li:last-child{</span><br><span style="background-color: rgba(255, 255, 153, 1)"> background: #ff008a;</span><br><span style="background-color: rgba(255, 255, 153, 1)"> }</span><br> <span style="background-color: rgba(255, 255, 0, 1)"> /*选中p1：定位到父元素，选择当前的第一个元素*/</span><br><span style="background-color: rgba(255, 255, 0, 1)"> /*选择当前p元素的父级元素，选中父级元素的第一个,并且是当前元素才生效!,顺序*/</span><br> <span style="background-color: rgba(0, 204, 255, 1)">p:nth-child(1) {</span><br><span style="background-color: rgba(255, 255, 153, 1)"> background: #2700ff;</span><br><span style="background-color: rgba(255, 255, 153, 1)"> }</span><br> <span style="background-color: rgba(255, 255, 0, 1)"> /*选中父元素，下的p元素的第二个，类型*/</span><br> <span style="background-color: rgba(0, 204, 255, 1)"> p:nth-of-type(2){</span><br><span style="background-color: rgba(255, 255, 153, 1)"> background: yellow;</span><br><span style="background-color: rgba(255, 255, 153, 1)"> }</span><br> <span style="background-color: rgba(0, 204, 255, 1)"> /*a:hover{*/[鼠标指上去才有颜色，产生动画效果]</span><br><span style="background-color: rgba(255, 255, 153, 1)"> /* background: #a13d30;*/</span><br><span style="background-color: rgba(255, 255, 153, 1)"> /*}*/</span><br> <span style="background-color: rgba(255, 204, 153, 1)"> /* 伪类有个动作*/</span><br><br> </style><br></head><br><body><br><span style="background-color: rgba(0, 204, 255, 1)"><!--<a href="">312331</a>--></span><br><span style="background-color: rgba(0, 204, 255, 1)"><!--<h1>h1</h1>--></span><br><span style="background-color: rgba(0, 255, 255, 1)"><p>p1</p></span><br><span style="background-color: rgba(0, 255, 255, 1)"><p>p2</p></span><br><span style="background-color: rgba(0, 255, 255, 1)"><p>p3</p></span><br><span style="background-color: rgba(0, 255, 255, 1)"><ul></span><br><span style="background-color: rgba(0, 255, 255, 1)"> <li id="qinjiang">li1</li></span><br><span style="background-color: rgba(0, 255, 255, 1)"> <li>li2</li></span><br><span style="background-color: rgba(0, 255, 255, 1)"> <li>li3</li></span><br><span style="background-color: rgba(0, 255, 255, 1)"></ul></span><br></body><br></html></pre>
<pre><span style="background-color: rgba(0, 255, 0, 1)">6、属性选择器</span></pre>
<pre><!DOCTYPE html><br><html lang="en"><br><head><br> <meta charset="UTF-8"><br> <title>Title</title><br> <style><br> .demo a{<br> float: left;<br> display: block;<br> height: 50px;<br> width: 50px;<br> border-radius: 10px;<br> background: #2700ff;<br> text-align: center;<br> color: gainsboro;<br> text-decoration: none;<br> margin-right: 5px;<br> font:boLd 20px/50px Arial<br><br> }<br> <span style="background-color: rgba(255, 255, 0, 1)"> /*属性名.属性名等于属性值（正则）</span><br><span style="background-color: rgba(255, 255, 0, 1)"> =绝对等于</span><br><span style="background-color: rgba(255, 255, 0, 1)"> *=包含这个元素</span><br><span style="background-color: rgba(255, 255, 0, 1)"> ^=以这个开头</span><br><span style="background-color: rgba(255, 255, 0, 1)"> $=以这个结尾</span><br><span style="background-color: rgba(255, 255, 0, 1)"> */</span><br> <span style="background-color: rgba(255, 255, 0, 1)"> /*存在id属性的元素把它选中 a[]{}*/</span><br> <span style="background-color: rgba(0, 204, 255, 1)"> /* a{*/</span><br><span style="background-color: rgba(0, 204, 255, 1)"> /* background: yellow;*/</span><br><span style="background-color: rgba(0, 204, 255, 1)"> /* }*/</span><br><br><br> <span style="background-color: rgba(255, 255, 0, 1)"> /*id=first的元素*/</span><br> <span style="background-color: rgba(0, 204, 255, 1)"> /*a{*/</span><br><span style="background-color: rgba(0, 204, 255, 1)"> /* background: #02ff00;*/</span><br><span style="background-color: rgba(0, 204, 255, 1)"> /*}*/</span><br> <br> <br><span style="background-color: rgba(255, 255, 0, 1)">/*class中，有links的元素*/</span><br> <span style="background-color: rgba(0, 204, 255, 1)"> /* a{*/</span><br><span style="background-color: rgba(0, 204, 255, 1)"> /* background: yellow;*/</span><br><span style="background-color: rgba(0, 204, 255, 1)"> /* }*/</span><br><br><br><br> <span style="background-color: rgba(255, 255, 0, 1)"> /*选中href中以http开头的元素*/</span><br><span style="background-color: rgba(0, 204, 255, 1)">/*a{*/</span><br><span style="background-color: rgba(0, 204, 255, 1)"> /* background: yellow;*/</span><br><span style="background-color: rgba(0, 204, 255, 1)"> /*}*/</span><br><br><br> <span style="background-color: rgba(255, 255, 0, 1)"> /*选中href中以pdf结尾的元素*/</span><br> <span style="background-color: rgba(0, 204, 255, 1)"> /*a{*/</span><br><span style="background-color: rgba(0, 204, 255, 1)"> /* background: yellow;*/</span><br><span style="background-color: rgba(0, 204, 255, 1)"> /*}*/</span><br><br> </style><br></head><br><body><br><br><br><p class="demo"><br> <a href="https//www.baidu.com"class="links item first"id="first">1</a><br> <a href="https//www.blog.kuangstudy.com"class=links item active"target="_blank"title="test">2</a><br> <a href="images/123.html"class="links item">3</a><br> <a href="images/123.png"class="links item">4</a><br> <a href="images/123.jpg"class="links item">5</a><br> <a href="abc"class="links item">6</a><br> <a href="/a.pdf"class="links item">7</a><br> <a href="/abc.pdf"class="links item">8</a><br> <a href="abc.doc"class="links item">9</a><br> <a href="abcd.doc"class="links item last">10</a><br></p><br></body><br></html></pre>
<pre><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></pre>
<pre><span style="background-color: rgba(0, 255, 0, 1)"><span style="background-color: rgba(255, 0, 255, 1)"> </span></span></pre><br><br>
来源：https://www.cnblogs.com/LiLi8866/p/16101435.html
頁:
[1]