CSS 学习笔记

一甲易学 發表於 2021-1-23 14:07:00

<p></p><div class="toc"><div class="toc-container-header">目录</div><ul><li>什麽是CSS<ul><li>1.1什麽是CSS</li><li>1.2发展史</li><li>1.3快速入门</li><li>1.4CSS的n种导入形式</li></ul></li><li>2.选择器<ul><li>2.1 、基本选择器</li><li>2.1.1 标签选择器：</li><li>2.2 层次选择器</li><li>2.3结构伪类选择器</li><li>2.4 属性选择器</li></ul></li><li>3、美化网页元素<ul><li>3.1为什么要美化网页</li><li>3.2 文本样式，行样式</li><li>3.4 文本，阴影，超链接伪类</li><li>3.6 列表</li><li>3.7、背景</li><li>3.8、渐变</li></ul></li><li>4、盒子模型<ul><li>4.1什么是盒子模型</li><li>4.2、边框</li><li>4.3、外边距----妙用：居中</li><li>4.4、圆角边框----border-radius</li><li>4.5、盒子阴影</li></ul></li></ul></div><p></p>
<h2 id="什麽是css">什麽是CSS</h2>
<p>如何学习</p>
<p>1、CSS是什麽</p>
<p>2、CSS怎么用（快速入门）</p>
<p>3、CSS选择器（重点+难点）</p>
<p><strong>4、美化网页（文字，阴影，超链接，列表，渐变……）</strong></p>
<p>5、盒子模型</p>
<p>6、浮动</p>
<p>7、定位</p>
<p>8、网页动画（特效效果）</p>
<h3 id="11什麽是css">1.1什麽是CSS</h3>
<p>Cascading Style Sheet 层叠级联样式表</p>
<p>CSS：表现（美化网页）</p>
<p>字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动</p>
<p><img src="https://i.loli.net/2021/02/04/phiF6OzGRnUdjIl.png" alt="image-20210122201938827" loading="lazy"></p>
<h3 id="12发展史">1.2发展史</h3>
<p>CSS1.0</p>
<p>CSS2.0 DIV（块）+ CSS，HTML 与CSS结构分离的思想，网页变得简单，SEO(搜索引擎)</p>
<p>CSS2.1 浮动，定位</p>
<p>CSS3.0 圆角，阴影，动画..浏览器兼容性~</p>
<h3 id="13快速入门">1.3快速入门</h3>
<style></style>
<p>或者</p>
<p><code><link rel="stylesheet" href="css/style.css"></code></p>
<p>养成习惯：在demo里面建一个CSS文件夹，外面是index.html文件</p>
<p>CSS语法：每一个语句最好以分号结尾</p>
<pre><code>选择器{
声明1；
声明2；
声明3；
}
</code></pre>
<p>CSS的优势：<br>
1、内容和表现分离</p>
<p>2、网页结构表现统一，可以实现复用</p>
<p>3、样式十分丰富</p>
<p>4、建议使用独立于html的CSS文件</p>
<p>5、利用SEO，容易被搜索引擎收录</p>
<h3 id="14css的n种导入形式">1.4CSS的n种导入形式</h3>
<p>最简单的：</p>
<p><code><h1 style="color: red"> </h1></code></p>
<p>内部样式：</p>
<style>h1 { color: rgba(0, 128, 0, 1) }</style>
<p>外部样式：新建一个CSS文件link进来</p>
<p>优先级：就近原则</p>
<p>拓展：外部样式两种写法</p>
<ul>
<li>CSS3 链接式，加载完再显示</li>
<li></li>
<li>CSS2.1 导入式先加载html再渲染，必须加入style标签中</li>
</ul>
<pre><code><style>
@import url("css/style.css");
</style>
</code></pre>
<h2 id="2选择器">2.选择器</h2>
<h3 id="21-基本选择器">2.1 、基本选择器</h3>
<p>1、标签选择器选择一类标签标签{}</p>
<p>2、类选择器选择所有class一样的标签 .类名{}</p>
<p>3、id 选择器选择id的标签 #id{}</p>
<p><strong>id > class >标签</strong></p>
<h3 id="211-标签选择器">2.1.1 标签选择器：</h3>
<pre><code><style>
/*会选择到页面上所有的这个标签的元素*/
h1{
color : #000000;
backbround : #111111;
}
</style>
</code></pre>
<p>2.1.2 类选择器：让每一个元素都有一个class属性，通过这个class选择，好处：可以多个标签归类，是同一个class</p>
<pre><code> .zzw{
color : #000000;
backbround : #111111;
}
</code></pre>
<p>2.1.3 ID选择器：让每一个元素，ID不能复用，全球唯一</p>
<pre><code>#id1{
color : #000000;
backbround : #111111;
}
</code></pre>
<p>不遵循就近原则，固定的</p>
<h3 id="22-层次选择器">2.2 层次选择器</h3>
<p>0、层次选择器不改变自身的样式</p>
<p>1、后代选择器 : 再某个元素后面祖爷爷、爸爸，你，孙子，全部子孙都会变style</p>
<pre><code class="language-css">/*后代选择器*/
body p{
background: red;
}
</code></pre>
<p>2、子选择器：在某个元素后面的第一代子类。</p>
<pre><code class="language-css">/*子选择器*/
body>p{
background: red;
}
</code></pre>
<p>3、相邻兄弟选择器只有一个，而且是下面</p>
<pre><code class="language-css">.class1 + p{

}
</code></pre>
<p>4、通用选择器当前选中元素的向下的所有兄弟元素</p>
<pre><code class="language-css">.class1 ~ p{

}
</code></pre>
<h3 id="23结构伪类选择器">2.3结构伪类选择器</h3>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>

<style>
   /*ul li的第一个子元素*/
   ul li:first-child{
         background: aqua;
   }
   /*ul li的最后子元素*/
   ul li:last-child{
         background: aqua;
   }

   /*选中p1 定位到父元素找到当前的第一个元素*/
   /*选择当前P元素的父级元素，选中父级元素的第一个，并且是当前元素才生效！*/
   p:nth-child(1){
   }

   /*选中父元素：下的p元素的第二个，类型*/
   p:nth-of-type(2){
         background: yellow;
   }
</style>

</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
   <li>li1</li>
   <li>li2</li>
   <li>li3</li>
</ul>
</body>
</html>
</code></pre>
<h3 id="24-属性选择器">2.4 属性选择器</h3>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>

<style>
   .demo a{
         float: left;
         display: block;
         height: 50px;
         width: 50px;
         background: aqua;
         border-radius: 10px;
         text-align: center;
         color: gold;
         text-decoration: none;
         margin-right: 5px;
         font: bold 20px/50px Arial;
   }

   /*id = first的元素*/
   a{
         background: blue;
   }
   /*存在id属性的元素 a[]{}属性名 = 属性值（正则）*/
   a{
         background: yellow;
   }
   /*class 中有 links 的元素*/
   /*属性值可以加引号可以不加引号
   *=相对等于
   =绝对等于
   ^=匹配正则以什麽开始
   $=匹配正则以什麽结尾
   */
   a{
         background: red;
   }

   a{
         background: beige;
   }

   a{
         background: gray;
   }

</style>

</head>
<body class="demo">

<a href="http://www.baidu.com" class="links item first" id="first"> 1 </a>
<a href="images/123.html" class="links item" > 2 </a>
<a href="images/123.png" class="links item" > 3</a>
<a href="images/123.jpg" class="links item" > 4 </a>
<a href="abc" class="links item" > 5 </a>
<a href="/a.pdf" class="links item" > 6 </a>
<a href="/abc.pdf" class="links item" > 7 </a>
<a href="/abc.doc" class="links item" > 8 </a>
<a href="http://www.baidu.com" class="links item" > 9 </a>
<a href="http://www.baidu.com" class="links item last" id = "last" > 10 </a>

</body>
</html>
</code></pre>
<p><img src="https://i.loli.net/2021/02/04/6AUwkcpufamCoWB.png" alt="image-20210122214642769" loading="lazy"></p>
<h2 id="3美化网页元素">3、美化网页元素</h2>
<h3 id="31为什么要美化网页">3.1为什么要美化网页</h3>
<p>1、有效的传递页面信息</p>
<p>2、美化网页，网页漂亮，才能吸引用户</p>
<p>3、凸显网页的主题</p>
<p>4、提高用户体验度</p>
<p>约定俗成</p>
<pre><code class="language-html"><span>标签

<div> 标签
</code></pre>
<h3 id="32-文本样式行样式">3.2 文本样式，行样式</h3>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>



<style>
   body{
         font-family:楷体;
   }
   h1{
         font-size: 50px;
   }
   .demo p{
         font-weight: bold;
   }
</style>

</head>
<body class="demo">

<h1>故事介绍</h1>

<p>
bbbbb
</p>
<p>
bbbbbbbb
</p>

</body>
</html>
</code></pre>
<h3 id="34-文本阴影超链接伪类">3.4 文本，阴影，超链接伪类</h3>
<pre><code class="language-html"><style>
a{/*超链接有默认的颜色*/
text-decoration:none;
color:#000000;
}
a:hover{/*鼠标悬浮的状态*/
color:orange;
}
a:active{/*鼠标按住未释放的状态*/
color:green
}
a:visited{/*点击之后的状态*/
color:red
}
</style>
</code></pre>
<p>阴影</p>
<pre><code class="language-html">/* 第一个参数：表示水平偏移
第二个参数：表示垂直偏移
第三个参数：表示模糊半径
第四个参数：表示颜色
*/
text-shadow:5px 5px 5px 颜色
</code></pre>
<h3 id="36-列表">3.6 列表</h3>
<pre><code class="language-css">/*list-style{
none:去掉原点
circle：空心圆
decimal：数字
square：正方形
}*/
ul li{
height:30px;
list-style:none;
text-indent:1em;
}
a{
text-decoration:none;
font-size:14px;
color:#000;
}
a:hover{
color:orange;
text-decoration:underline
}
/*放在div中，作为导航栏*/
<div id="nav"></div>
#nav{
width:300px;
}
</code></pre>
<h3 id="37背景">3.7、背景</h3>
<ol>
<li>背景颜色：background</li>
<li>背景图片</li>
</ol>
<pre><code class="language-css">background-image:url("");/*默认是全部平铺的*/
background-repeat:repeat-x/*水平平铺*/
background-repeat:repeat-y/*垂直平铺*/
background-repeat:no-repeat/*不平铺*/
</code></pre>
<p>3.综合使用</p>
<pre><code class="language-css">background:red url("图片相对路劲") 270px 10px no-repeat
background-position：/*定位：背景位置*/
</code></pre>
<h3 id="38渐变">3.8、渐变</h3>
<p>网址：https://www.grablent.com<br>
径向渐变、圆形渐变</p>
<h2 id="4盒子模型">4、盒子模型</h2>
<h3 id="41什么是盒子模型">4.1什么是盒子模型</h3>
<ol>
<li>margin：外边距</li>
<li>padding：内边距</li>
<li>border：边框</li>
</ol>
<h3 id="42边框">4.2、边框</h3>
<p>border：粗细样式颜色</p>
<ol>
<li>
<p>边框的粗细</p>
</li>
<li>
<p>边框的样式</p>
</li>
<li>
<p>边框的颜色</p>
</li>
</ol>
<h3 id="43外边距----妙用居中">4.3、外边距----妙用：居中</h3>
<p>margin-left/right/top/bottom–>表示四边，可分别设置，也可以同时设置如下</p>
<pre><code class="language-css">margin:0 0 0 0/*分别表示上、右、下、左；从上开始顺时针*/
/*例1：居中*/
margin:0 auto /*auto表示左右自动*/
/*例2：*/
margin:4px/*表示上、右、下、左都为4px*/
/*例3*/
margin:10px 20px 30px/*表示上为10px，左右为20px，下为30px*/
</code></pre>
<p>盒子的计算方式：<br>
margin+border+padding+内容的大小</p>
<p>总结：<br>
body总有一个默认的外边距 margin:0<br>
常见操作：初始化</p>
<pre><code class="language-css">margin:0;
padding:0;
text-decoration:none;
</code></pre>
<h3 id="44圆角边框----border-radius">4.4、圆角边框----border-radius</h3>
<p>border-radius有四个参数（顺时针），左上开始<br>
圆圈：圆角=半径</p>
<h3 id="45盒子阴影">4.5、盒子阴影</h3><br><br>
来源：https://www.cnblogs.com/ziwenblog/p/14317500.html

頁: [1]

琼殿技术论坛's Archiver

CSS 学习笔记