CSS学习随记
<h1 style="text-align: center">CSS学习笔记</h1><h2>1.什么是CSS </h2>
<p> Cascading Style Sheet简称CSS，是层叠样式表</p>
<p> 主要用于变现层（用于美化网页）</p>
<h2>2.CSS快速入门</h2>
<p> 1.语法</p>
<p> 选择器{</p>
<p> 声明1；</p>
<p> 声明2；</p>
<p> 声明3；</p>
<p> }</p>
<p> 2.css的优势</p>
<p> ①内容和表现分离</p>
<p> ②网页结构表现统一，可以实现复用</p>
<p> ③样式十分的丰富</p>
<p> ④使用独立的HTML和CSS文件</p>
<p> ⑤利于SEO，容易被搜素引擎收录</p>
<h2>3.三种CSS导入方式</h2>
<p> 1.行内样式:在标签元素中，编写一个style属性，编写样式即可</p>
<p> <h1 style="color:red">你好,CSS</h1></p>
<p> 2.内部样式：</p>
<p> <style></p>
<p> h1{</p>
<p> color:red;</p>
<p> }</p>
<p> </style></p>
<p> 3.外部样式</p>
<p> <head></p>
<p> <link rel="stylesheet" href="../resources/css/index.css"></p>
<p> </head></p>
<p> ps:样式优先级问题：</p>
<p> 一般： <span style="color: rgba(255, 0, 0, 1)">就近原则（谁离这个标签近，谁的优先级就高）。</span></p>
<h2> 3.三种基本选择器 --重要</h2>
<p> 1.选择器的作用</p>
<p> 选择页面上的某一个或者某一类元素</p>
<p> ①标签选择器 -->标签选择器，会选择到页面上所有的这个标签的元素</p>
<p> h1{</p>
<p> color:red;</p>
<p> }</p>
<p> ②类选择器 -->好处：可以多个标签归类，是同一个class，可以复用</p>
<p> <span style="color: rgba(255, 0, 0, 1)">.class</span>的名称{</p>
<p> }</p>
<p> ③ID选择器 --> id必须保证全局唯一</p>
<p> #id名称{</p>
<p> }</p>
<p> 三种选择器的优先级：</p>
<p> id选择器>类选择器>标签选择器</p>
<h2>4.高级选择器</h2>
<p> 4.1层次选择器</p>
<p> 4.1.1后代选择器：在某个元素的后面</p>
<p> body p{} -->body标签里面的所有p标签都生效。</p>
<p> 4.1.2子选择器</p>
<p> body>p{} -->body标签的子代p元素才会生效。</p>
<p> 4.1.3相邻兄弟选择器</p>
<p> .ccl + p{} -->类选择器相邻的p元素才生效 （只有一个生效，对下不对上）。</p>
<p> 4.1.4通用选择器</p>
<p> .ccl~p{} -->类选择器同级的p元素才会生效 （一样的对下不对上）。</p>
<p> 4.2结构伪类选择器</p>
<p> ul li:first-child{} -->选择ul后代中的第一个子元素</p>
<p> ul li:last-child{} -->选择ul后代中的最后一个元素</p>
<p> p:nth-child(1){} -->选择当前p元素的父级元素，选中父级元素的第一个，并且是当前元素才生效</p>
<p> p:nth-of-type(2){} -->选中父元素下的p元素的第二个，按类型来选择</p>
<p> a:hover{} -->当鼠标移动到a标签时，会发生改变</p>
<p> 4.3属性选择器 -- 重要</p>
<p> a{} -->选择a标签中有id属性的元素</p>
<p> a{} -->选择a标签中id为first的元素</p>
<h2>5.CSS的作用</h2>
<p> 1.有效的传递页面信息</p>
<p> 2.美化网页</p>
<p> 3.凸显页面的主题</p>
<p> 4.提高用户的体验</p>
<p> span标签：重点要突出的字，使用span套起来。</p>
<h2>6.盒子模型</h2>
<p> border:边框 粗细 样式 颜色（1px,solid,red）</p>
<p> margin：可以是元素居中</p>
<p> padding:内边距</p><br><br>
来源：https://www.cnblogs.com/gcdlj/p/12556260.html
頁:
[1]