CSS入门学习

花无悔 發表於 2020-5-16 00:34:00

CSS层叠样式表：
<h1> 0x01 前言</h1>
什么是css：
cascading style sheets（层叠   样式  表）
css作用：
结构与样式分离的方式，便于后期维护与改版
可以用多套样式，使网页有任意样式的切换效果
使页面载入得更快，降低服务器的成本
 
样式表分类：外部、内部、行内样式
 
<h1>0x02 准备</h1>
sublime/记事本/PHPstorm/webstorm这几款都好的
 
<h1>0x03 开始学习</h1>
<h2>0x03 - 0x01 css样式文件结构</h2>
<img src="https://img2020.cnblogs.com/blog/1497136/202005/1497136-20200515214901398-620950666.png" alt="">
 
 
在HTML中写css（内部样式）
<div class="cnblogs_code">
<pre><style type="text/css">
p{
 background-color: red;
 font-size: 20px;
}
</style></pre>
</div>
 
<h2>0x03 - 0x02 选择器</h2>
什么是选择器，干啥子用哦？
用来选择（找到）需要添加样式的位置
 
常用选择器：标签选择器、（归）类选择器
标签选择器：
<div class="cnblogs_code"><img id="code_img_closed_ab2f6cde-6811-4e64-b4aa-688ffc7e9b9c" class="code_img_closed" src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" alt=""><img id="code_img_opened_ab2f6cde-6811-4e64-b4aa-688ffc7e9b9c" class="code_img_opened" style="display: none" src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" alt="">
<div id="cnblogs_code_open_ab2f6cde-6811-4e64-b4aa-688ffc7e9b9c" class="cnblogs_code_hide">
<pre><style type="text/css">
p{
 background-color: blue;
 font-size:40px;
}
</style>

<p>http://www.baidu.com</p></pre>
</div>
View Code</div>
 
类选择器：
<div class="cnblogs_code"><img id="code_img_closed_db6f0000-4486-4d6c-81bf-93de3466fb87" class="code_img_closed" src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" alt=""><img id="code_img_opened_db6f0000-4486-4d6c-81bf-93de3466fb87" class="code_img_opened" style="display: none" src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" alt="">
<div id="cnblogs_code_open_db6f0000-4486-4d6c-81bf-93de3466fb87" class="cnblogs_code_hide">
<pre><style type="text/css">
.p1{
 font-family: 隶书;
}
</style>

<p class="p1">百度</p></pre>
</div>
View Code</div>
 
<h2>0x03 - 0x02 背景设置</h2>
background-color  颜色   背景色
background-image               图片位置   图片作为背景图
background-repeat              repeat、    背景图片重复的方向
 　　　　　　　　　　　　repeat-x、
　　　　　　　　　　　　repeat-y、
　　　　　　　　　　　　no-repeat 
background-attachment      scroll、       背景是否随滚动条滚动
                                            fixed  
background-position               见后表                背景图像的其实位置
background                    背景样式的值是符合属性值组合（以上综合填写即可）
 
<img src="https://img2020.cnblogs.com/blog/1497136/202005/1497136-20200515235415873-385059503.png" alt="">
 
 
 
示例：
<div class="cnblogs_code"><img id="code_img_closed_346b1468-0eed-41cf-99b9-5bdad61bdd33" class="code_img_closed" src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" alt=""><img id="code_img_opened_346b1468-0eed-41cf-99b9-5bdad61bdd33" class="code_img_opened" style="display: none" src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" alt="">
<div id="cnblogs_code_open_346b1468-0eed-41cf-99b9-5bdad61bdd33" class="cnblogs_code_hide">
<pre> body{
 background-color: yellow;
 background-image: url("1.jpg");
 background-repeat: no-repeat;
 background-attachment: fixed;
 background-position: 10px 20px;
}</pre>
</div>
View Code</div>
 
<h2>0x03 - 0x02 外部样式表</h2>
新建一个文档，然后里面全部是css代码
接着用link插入到html代码中去
作用：使网页的表示层与结构层彻底分离
示例：
<div class="cnblogs_code">
<pre><link rel="stylesheet" type="text/css" href="index.css"></pre>
</div>
除了link，还有其他方法
link：用于定义文档与外部资源的关系
rel：是relationship的英文缩写，也就是关系
type：定义css样式文件的类型
href：链接的css文件名字
 
<div class="cl-preview-section">
<h2>0x03 - 0x04 优先级总结</h2>
</div>
<div class="cl-preview-section">
行内元素样式设置> 内部样式设置 >外部连接样式设置
</div>
 
<h2>0x03 - 0x04 颜色表及html代码</h2>
<img src="https://img2020.cnblogs.com/blog/1497136/202005/1497136-20200516003217957-1097115298.png" alt="">
 
文本样式表格：
 
<img src="https://img2020.cnblogs.com/blog/1497136/202005/1497136-20200516124939904-646753820.png" alt="">
 
 
<img src="https://img2020.cnblogs.com/blog/1497136/202005/1497136-20200516133247315-1624333010.png" alt="">
 
 
字母或者汉字direction和text-align没有区别，如果是阿拉伯语（阿拉伯数字）则逆序输出
示例：
<div class="cnblogs_code">
<pre>p{
color: rgb(238,130,238);
direction: ltr;
letter-spacing: 10px;
line-height: 20px;
text-align: justify;

}</pre>
</div>
 
<h2>0x03 - 0x05 字体类样式</h2>
font-系列：font-style、font-family等
 
作用：定义文本的字体系列、大小、加粗、风格（如斜体）和变形（如小型大写字母）
 
注：了解样式的实现效果
<img src="https://img2020.cnblogs.com/blog/1497136/202005/1497136-20200516141944308-1466498904.png" alt="">
 
 
<h2>0x03 - 0x06 列表样式</h2>
 
 
<img src="https://img2020.cnblogs.com/blog/1497136/202005/1497136-20200516143755243-486077445.png" alt="">
 
 第一个属性可以使用的值：）<img src="https://img2020.cnblogs.com/blog/1497136/202005/1497136-20200516143935587-1927962072.png" alt="">
 
 
ul是无序列表
ol是有序列表
html里代码如下：
<div class="cnblogs_code">
<pre><ul>
<li>aaaa</li>
<li>aaaa</li>
<li>aaaa</li>
<li>aaaa</li>
<li>aaaa</li>
<li>aaaa</li>
<li>aaaa</li>
<li>aaaa</li>
</ul>

<ol>
<li>asdddd</li>
<li>asdddd</li>
<li>asdddd</li>
<li>asdddd</li>
<li>asdddd</li>
</ol></pre>
</div>
css：
<div class="cnblogs_code">
<pre>ul{
list-style-type: circle;

}

ol{
list-style-type: lower-alpha;
}</pre>
</div>
 
示例：
<img src="https://img2020.cnblogs.com/blog/1497136/202005/1497136-20200516144510155-47042568.png" alt="">
 
 
list-style也是全部总结的一样，image选项是把前面的符号改成自己的图片
 
列表样式：
使用频率很高，经常用于菜单、规律性展示等应用场景
 
<h2>0x03 - 0x07 伪类的样式处理</h2>
通常情况下，超级链接上设置的样式，称为伪类（但是不太严谨）
作用：设置超级链接的4种状态
 
<h3>伪类选择器：</h3>
<img src="https://img2020.cnblogs.com/blog/1497136/202005/1497136-20200520224317991-139147699.png" alt="" width="1285" height="697">
 
 
冒号后面的是伪类：
示例：
<div class="cnblogs_code"><img id="code_img_closed_b74a1c5a-7350-40c8-b44c-5fbea9c0550a" class="code_img_closed" src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" alt=""><img id="code_img_opened_b74a1c5a-7350-40c8-b44c-5fbea9c0550a" class="code_img_opened" style="display: none" src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" alt="">
<div id="cnblogs_code_open_b74a1c5a-7350-40c8-b44c-5fbea9c0550a" class="cnblogs_code_hide">
<pre> 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>Document</title>
 6 <link rel="stylesheet" type="text/css" href="index.css">
 7
 8 </head>
 9 <body>
10 <p>http://www.baidu.com</p>
11 <p class="p1">百度</p>
12 <a href="#">伪类</a>
13
14 </body>
15 </html></pre>
</div>
HTML</div>
<div class="cnblogs_code">
<pre>a:link{
color: red;
}</pre>
</div>
 
<img src="https://img2020.cnblogs.com/blog/1497136/202005/1497136-20200520224843569-599084509.png" alt="">
 未被点击之前是红色，点击之后还可以修改
例：
<div class="cnblogs_code"><img id="code_img_closed_a4aa0087-0b86-4ff9-9f1d-b772c9d2a2f4" class="code_img_closed" src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" alt=""><img id="code_img_opened_a4aa0087-0b86-4ff9-9f1d-b772c9d2a2f4" class="code_img_opened" style="display: none" src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" alt="">
<div id="cnblogs_code_open_a4aa0087-0b86-4ff9-9f1d-b772c9d2a2f4" class="cnblogs_code_hide">
<pre> 1 a:link{//未被访问
 2 color: red;
 3 }
 4 a:visited{//访问之后
 5 color: green;
 6 }
 7 a:hover{//鼠标覆盖
 8 color: yellow;
 9 font-size: 30px;
10 }
11 a:active{//鼠标点击
12 color: blue;
13 }</pre>
</div>
css2</div>
label、input文本框都可以用（文本框就是焦点类似的）
不过还是有点疑惑（希望有师傅能够解答）：
<img src="https://img2020.cnblogs.com/blog/1497136/202005/1497136-20200520225830980-336200203.png" alt="">
 
 
我的input文本框放上去不会产生红色背景色
 
<h3>伪类分类</h3>
 
两种伪类：
状态伪类和结构性伪类两种
前面的那个表都是状态伪类
 
这里主要谈结构性伪类
<img src="https://img2020.cnblogs.com/blog/1497136/202005/1497136-20200520230322698-37572020.png" alt="">
 
 示例：
<div class="cnblogs_code"><img id="code_img_closed_eaa2e426-0c6c-4253-a39a-6d0b6d139f9d" class="code_img_closed" src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" alt=""><img id="code_img_opened_eaa2e426-0c6c-4253-a39a-6d0b6d139f9d" class="code_img_opened" style="display: none" src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" alt="">
<div id="cnblogs_code_open_eaa2e426-0c6c-4253-a39a-6d0b6d139f9d" class="cnblogs_code_hide">
<pre> 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>Document</title>
 6 <link rel="stylesheet" type="text/css" href="index.css">
 7
 8 </head>
 9 <body>
10 
11 <p>http://www.baidu.com</p>
12 <p class="p1">百度</p>
13 <p>baidu</p>
14
15
16 </body>
17 </html></pre>
</div>
html1</div>
<div class="cnblogs_code"><img id="code_img_closed_3a429e0e-b9c2-4ee9-bff3-71bd621966a8" class="code_img_closed" src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" alt=""><img id="code_img_opened_3a429e0e-b9c2-4ee9-bff3-71bd621966a8" class="code_img_opened" style="display: none" src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" alt="">
<div id="cnblogs_code_open_3a429e0e-b9c2-4ee9-bff3-71bd621966a8" class="cnblogs_code_hide">
<pre>1 p:first-child{
2 background-color: red;
3 }</pre>
</div>
css1</div>
<img src="https://img2020.cnblogs.com/blog/1497136/202005/1497136-20200520230647452-79420796.png" alt="">
 
 
假如把里面的<h1>的注释去掉，则不会有效果
 
因为是父元素所选的子元素的第一行是p才可以显示
 
然后用first-of-type可以解决这个问题
 
<div class="cnblogs_code"><img id="code_img_closed_048bdc8a-f8c8-4de0-a98f-6f374b16a065" class="code_img_closed" src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" alt=""><img id="code_img_opened_048bdc8a-f8c8-4de0-a98f-6f374b16a065" class="code_img_opened" style="display: none" src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" alt="">
<div id="cnblogs_code_open_048bdc8a-f8c8-4de0-a98f-6f374b16a065" class="cnblogs_code_hide">
<pre> 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>Document</title>
 6 <link rel="stylesheet" type="text/css" href="index.css">
 7
 8 </head>
 9 <body>
10 
11 <p>http://www.baidu.com</p>
12 <p class="p1">百度</p>
13 <p>baidu</p>
14
15 <br>
16 <br>
17 <table border="1" width="500px">
18 <tr>
19 <td>1</td>
20 <td>1</td>
21 <td>1</td>
22 <td>1</td>
23 </tr>
24 <tr>
25 <td>1</td>
26 <td>1</td>
27 <td>1</td>
28 <td>1</td>
29 </tr>
30 <tr>
31 <td>1</td>
32 <td>1</td>
33 <td>1</td>
34 <td>1</td>
35 </tr>
36
37 </table>
38
39 </body>
40 </html></pre>
</div>
示例3</div>
<div class="cnblogs_code"><img id="code_img_closed_4d80c0e8-9bd0-4b5d-a8fe-c8c01e04e387" class="code_img_closed" src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" alt=""><img id="code_img_opened_4d80c0e8-9bd0-4b5d-a8fe-c8c01e04e387" class="code_img_opened" style="display: none" src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" alt="">
<div id="cnblogs_code_open_4d80c0e8-9bd0-4b5d-a8fe-c8c01e04e387" class="cnblogs_code_hide">
<pre>1 p:last-child{
2 background-color: red;
3 }
4
5 td:nth-child(2){
6 /*找所有单元格的第二列*/
7 background-color: red;
8
9 }</pre>
</div>
css3</div>
<img src="https://img2020.cnblogs.com/blog/1497136/202005/1497136-20200520231542158-986965261.png" alt="">
 
 
<h3>伪元素选择器</h3>
选择部分内容，补充伪类选择器
（在以前与伪类一样，在CSS3以后都采用双冒号开始）
<img src="https://img2020.cnblogs.com/blog/1497136/202005/1497136-20200520231636722-487086364.png" alt="">
 
 
示例：
<div class="cnblogs_code"><img id="code_img_closed_d0412567-c5ec-4ec3-8185-89f86229c5c4" class="code_img_closed" src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" alt=""><img id="code_img_opened_d0412567-c5ec-4ec3-8185-89f86229c5c4" class="code_img_opened" style="display: none" src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" alt="">
<div id="cnblogs_code_open_d0412567-c5ec-4ec3-8185-89f86229c5c4" class="cnblogs_code_hide">
<pre> 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>Document</title>
 6 <link rel="stylesheet" type="text/css" href="index.css">
 7
 8 </head>
 9 <body>
10 
11 <p>http://www.baidu.com</p>
12 <p class="p1">百度</p>
13 <p>baidu</p>
14
15 <h1>百度欢迎您</h1>
16 <p>sharun师傅好帅，人又聪明，我好喜欢他啊，不过呢，人家有女朋友了，世界上每一条单身狗收到伤害，每一对情侣都逃不过责任</p>
17
18 <br>
19 <br>
20 <table border="1" width="500px">
21 <tr>
22 <td>1</td>
23 <td>1</td>
24 <td>1</td>
25 <td>1</td>
26 </tr>
27 <tr>
28 <td>1</td>
29 <td>1</td>
30 <td>1</td>
31 <td>1</td>
32 </tr>
33 <tr>
34 <td>1</td>
35 <td>1</td>
36 <td>1</td>
37 <td>1</td>
38 </tr>
39
40 </table>
41
42 </body>
43 </html></pre>
</div>
View Code</div>
<div class="cnblogs_code"><img id="code_img_closed_cf93e8fa-970c-4ece-912c-5364e7ebd065" class="code_img_closed" src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" alt=""><img id="code_img_opened_cf93e8fa-970c-4ece-912c-5364e7ebd065" class="code_img_opened" style="display: none" src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" alt="">
<div id="cnblogs_code_open_cf93e8fa-970c-4ece-912c-5364e7ebd065" class="cnblogs_code_hide">
<pre>1 p::before{
2 content: /*(每个段落之前要加的文字)*/"我好菜，";
3 }</pre>
</div>
View Code</div>
 
<img src="https://img2020.cnblogs.com/blog/1497136/202005/1497136-20200520232152353-1801586849.png" alt="">
 
 
其他都类似
使用selection时，用*代表所有可以选择内容（例如*::selection）
伪类/伪元素选择器注意事项：不论做什么样式设计，除了语法也要了解效果，伪类和伪元素的概念要分清
  
来源：https://www.cnblogs.com/JeffKing11/p/12897230.html

頁: [1]

琼殿技术论坛's Archiver

CSS入门学习