前端学习二（css）

胡子头 發表於 2021-10-23 22:58:00

一、使用css三种方式
<div>
<div> 1、外链式：在head中通过link链接外部css文件</div>
<div> 2、嵌入式：通过style标签里面写css，通常在head里面</div>
<div> 3、内联式：通过标签本身的style属性，在标签上写样式</div>
</div>
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<HTML>

<head>
<title>学习css</title>
<meta charset="utf-8">



</head>

<body>
<div style="width: 500px;height: 200px;background: cadetblue;">
 div
</div>
</body>

</HTML></pre>
</div>
以下是示例使用的myfirst.css代码
<div class="cnblogs_code"><img src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" id="code_img_closed_3e387b39-ba92-41a6-afb2-ce35989179b1" class="code_img_closed"><img src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" id="code_img_opened_3e387b39-ba92-41a6-afb2-ce35989179b1" class="code_img_opened" style="display: none">
<div id="cnblogs_code_open_3e387b39-ba92-41a6-afb2-ce35989179b1" class="cnblogs_code_hide">
<pre>div{
width: 500px;
height: 500px;
background: red
}</pre>
</div>
View Code</div>
二、文本样式
这里示例有用到下面的选择器
<div class="cnblogs_code"><img src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" id="code_img_closed_aa8317d1-11c0-4760-8575-a20725dd1227" class="code_img_closed"><img src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" id="code_img_opened_aa8317d1-11c0-4760-8575-a20725dd1227" class="code_img_opened" style="display: none">
<div id="cnblogs_code_open_aa8317d1-11c0-4760-8575-a20725dd1227" class="cnblogs_code_hide">
<pre><!DOCTYPE html>
<HTML>

<head>
<title>学习css</title>
<meta charset="utf-8">
<style>
 /* 这种所有的p标签都会生效 */
 p {
 color: #8b0000;
 /* 字体大小 */
 font-size: 18px;
 /* 字体行高 */
 line-height: 30px;
 }

 /* 对class="p1"的标签生效，
 设置了某种属性，就会覆盖全局设置的某种属性 */
 .p1 {
 color: #000;
 /* 字体加粗 */
 font-weight: bold;
 /* 字体倾斜 */
 font-style: italic;
 /* 缩进，根据字体大小可以推断缩进几个字符 */
 text-indent: 36px;
 /* 设置字体 */
 font-family: "楷体";
 /* 居中 */
 text-align: center;
 }

 .p4 {
 /* 同时设置几个属性，下面的顺序是：是否加粗、字号/行高、字体样式 */
 font: normal 12px/36px '微软雅黑';
 }
</style>
</head>

<body>
<div style="text-align: center;">
 
 <span>标题</span>
 <p class="p1">北京时间10月20日消息，奥运冠军杨倩入围2021年清华大学特等奖学金候选。根据规定，她可以拿到1.5万元奖学金。</p>
 <p>北京时间10月20日消息，奥运冠军杨倩入围2021年清华大学特等奖学金候选。根据规定，她可以拿到1.5万元奖学金。</p>
 <p>北京时间10月20日消息，奥运冠军杨倩入围2021年清华大学特等奖学金候选。根据规定，她可以拿到1.5万元奖学金。</p>
 <p class="p4">北京时间10月20日消息，奥运冠军杨倩入围2021年清华大学特等奖学金候选。根据规定，她可以拿到1.5万元奖学金。</p>

</div>
</body>

</HTML></pre>
</div>
View Code</div>
三、背景设置background
<div>
<div>
<div>1、设置背景颜色【颜色名、rgb（rgba第四个值是设置透明度）、16进制数值】</div>
<div>2、url 背景图片</div>
</div>
</div>
<div class="cnblogs_code"><img src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" id="code_img_closed_281d6596-927f-4d84-9924-629cf1554294" class="code_img_closed"><img src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" id="code_img_opened_281d6596-927f-4d84-9924-629cf1554294" class="code_img_opened" style="display: none">
<div id="cnblogs_code_open_281d6596-927f-4d84-9924-629cf1554294" class="cnblogs_code_hide">
<pre><!DOCTYPE html>
<HTML>

<head>
<title>背景</title>
<meta charset="utf-8">
<style>
 /* 给div元素设置样式 */
 div {
 width: 400px;
 height: 400px;
 /*
 1、设置背景颜色【颜色名、rgb（rgba第四个值是设置透明度）、16进制数值】
 2、url 背景图片 */
 /* background: rgb(219, 135, 222); */
 background: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fffvii-remake.square-enix-games.com%2Fimages%2Fcharacters%2Fcharacters_full_tifa.png&refer=http%3A%2F%2Fffvii-remake.square-enix-games.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg);
 /* 背景图大小百分比、像素值以及具体的单词都可以
 auto-原图大小
 cover-铺满 */
 background-size: 100px 100px;
 background-repeat: no-repeat;

 }

 /* 给整个body设置背景 */
 body {
 background: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fffvii-remake.square-enix-games.com%2Fimages%2Fcharacters%2Fcharacters_full_tifa.png&refer=http%3A%2F%2Fffvii-remake.square-enix-games.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg);
 background-size: 50% 400px;
 /* 平铺效果：no-repeat不平铺、 repeat-x水平平铺、repeat-y竖直平铺*/
 background-repeat: no-repeat;
 /* 背景位置百分比、像素值以及具体的位置单词都可以，默认是左上角*/
 background-position: 20%;
 /* 固定背景，不会随着浏览器上下滑动而滑动 */
 background-attachment: fixed;
 }
</style>
</head>

<body>
<div class="class">div1</div>
</body>

</HTML></pre>
</div>
View Code</div>
四、选择器
1、标签选择器(不常用)：通过元素的标签名进行选择 2、类选择器：通过元素class属性去选择 3、id选择器(也不常用，一般是js用的) 4、属性选择器(不常用)，示例如下，还可以根据name="b1"更具体的去筛选 5、包含选择器（层级）,根据层级用空格分开，可以标签、类、id、属性混用 6、组选择器，通过逗号隔开，也可以标签、类、id、属性混用 7、伪类及伪元素选择器 　　hover ：悬停显示效果 　　link ：向未被访问的链接添加样式 　　visited ：向已被访问的链接添加样式，只有color属性生效 　　active：链接被激活时的状态，也就是网页链接跳转之前的鼠标松开的状态 　　定义顺序为a:link>a:visited>a:hover>a:active 　　参考链接：https://blog.csdn.net/lionwerson/article/details/105991623
<div class="cnblogs_code"><img src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" id="code_img_closed_c8a098b1-bf36-468a-ae8f-43147e8adae4" class="code_img_closed"><img src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" id="code_img_opened_c8a098b1-bf36-468a-ae8f-43147e8adae4" class="code_img_opened" style="display: none">
<div id="cnblogs_code_open_c8a098b1-bf36-468a-ae8f-43147e8adae4" class="cnblogs_code_hide">
<pre><!DOCTYPE html>
<HTML>

<head>
<title>css选择器</title>
<meta charset="utf-8">
<style>
 /* 1、标签选择器(不常用)：通过元素的标签名进行选择 */
 li {
 color: rgb(172, 69, 69);
 }

 /* 2、类选择器：通过元素class属性去选择 */
 .li3 {
 color: rgb(91, 69, 172);
 }

 /* 3、id选择器(也不常用，一般是js用的) */
 #b2 {
 background: chartreuse;
 }

 /* 4、属性选择器(不常用)，示例如下，还可以根据name="b1"更具体的去筛选 */
 div {
 font-size: 20px;
 }

 /* 5、包含选择器（层级）,根据层级用空格分开，可以标签、类、id、属性混用
 下面例子.ul1如果省略，那么div下所有层级的li都会有此效果 */
 div .ul1 li {
 font-style: italic;
 }

 /* 6、组选择器，通过逗号隔开，也可以标签、类、id、属性混用 */
 h1,
 h2,
 h3 {
 font-weight: bold;
 }

 /* 7、伪类及伪元素选择器
 hover 悬停显示效果
 link 向未被访问的链接添加样式
 visited 向已被访问的链接添加样式，只有color属性生效
 active：链接被激活时的状态，也就是网页链接跳转之前的鼠标松开的状态
 定义顺序为a:link>a:visited>a:hover>a:active
 参考链接：https://blog.csdn.net/lionwerson/article/details/105991623
 */
 .python:hover {
 background: chartreuse;
 font-size: 30px;
 }

 a:link {
 color: #1515eb;
 font-weight: bold;
 font-size: 30px;
 }

 a:visited {
 color: rgb(31, 216, 14);
 }
</style>
</head>

<body>
<div class="box1" name="b1">box1</div>
<div class="box2" id="b2">box1
 <h1>h111111</h1>
 <h2>h222222</h2>
 <h3>h333333</h3>
</div>
<div class="box3">
 <ul class="ul1">
 <li>11</li>
 <li>22</li>
 <li class="li3">33</li>
 <li>44</li>
 <li>55</li>
 </ul>
</div>

<div class="box4">
 
 <ul style="list-style-type: none;">
 <li class="python">python</li>
 <li>java</li>
 <li>php</li>
 <li>c++</li>
 <li>go</li>
 </ul>
 <a href="https://www.baidu.com">百度</a>

</div>
</body>

</HTML></pre>
</div>
View Code</div>
五、三种模型框
<div>
<div>1、内边距  padding</div>
<div>2、边框线  border</div>
<div>3、外边距  margin，无背景色</div>
</div>
<div class="cnblogs_code"><img src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" id="code_img_closed_56001fda-a8e0-4c4f-8882-ad10af9b9283" class="code_img_closed"><img src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" id="code_img_opened_56001fda-a8e0-4c4f-8882-ad10af9b9283" class="code_img_opened" style="display: none">
<div id="cnblogs_code_open_56001fda-a8e0-4c4f-8882-ad10af9b9283" class="cnblogs_code_hide">
<pre><!DOCTYPE html>
<HTML>

<head>
<title>学习css</title>
<meta charset="utf-8">
<style>
 /*
 三种模型框
 1、内边距padding
 2、边框线border
 3、外边距margin，无背景色*/
 .box1 {
 width: 200px;
 height: 200px;
 background: darkgreen;
 padding: 20px;
 border: solid 5px red;
 margin: 10px;
 }

 .box2 {
 width: 300px;
 height: 300px;
 /* 内边距：可以设置有内边距的方向 */
 padding-left: 200px;
 background: darkgrey;
 /* 边框线：dotted-点线、solid-实线、double-双线 */
 border: dotted 5px blue;
 /* 外边距：单独设置一个方向 */
 margin-top: 30px;
 }

 .box3 {
 width: 400px;
 height: 400px;
 /* 内边距：设置2个值，第一个代表上下、第二个代表左右 */
 padding: 20px 10px;
 background: darkkhaki;
 /* 边框线：可以设置有边框线的方向，设置的三个值无顺序要求 */
 border-left: rgb(255, 0, 0) 5px double;
 /* 外边距：设置2个值，第一个代表上下、第二个代表左右 */
 margin: 10px auto;
 }
</style>
</head>

<body>
<div class="box1">有闲的节奏，挑拨的琴弦，在微风吹过斑驳光影的树下，倾听弦的声音，揣测着风的方向，越来越快乐，越来越幸福…… </div>
<div class="box2"></div>
<div class="box3"></div>
</body>

</HTML></pre>
</div>
View Code</div>
六、元素定位
<div>
<div>三种定位机制 : 普通文档流 (text)| 浮动(float) | 定位(position)</div>
<div>1、普通文档流【CSS中默认的文本文档】  </div>
<div>     除非专门指定，否则所有框都在普通流中定位。普通流中元素框的位置由元素在(X)HTML中的位置决定。</div>
<div>     块级元素从上到下依次排列，框之间的垂直距离由框的垂直margin计算得到。行内元素在一行中水平布置。</div>
<div>2、层定位</div>
<div>     对每个图层进行相应的定位（相对定位relative、绝对定位absolute、固定定位fixed、无定位static）</div>
<div>3、浮动</div>
</div>
<div class="cnblogs_code"><img src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" id="code_img_closed_93ae717a-6eb6-4082-9764-3da05a644546" class="code_img_closed"><img src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" id="code_img_opened_93ae717a-6eb6-4082-9764-3da05a644546" class="code_img_opened" style="display: none">
<div id="cnblogs_code_open_93ae717a-6eb6-4082-9764-3da05a644546" class="cnblogs_code_hide">
<pre><!DOCTYPE html>
<HTML>

<head>
<title>学习css</title>
<meta charset="utf-8">
<style>
 /*CSS3 中有三种定位机制 : 普通文档流 (text)| 浮动(float) | 定位(position)
 一、普通文档流【CSS中默认的文本文档】
 除非专门指定，否则所有框都在普通流中定位。普通流中元素框的位置由元素在(X)HTML中的位置决定。
 块级元素从上到下依次排列，框之间的垂直距离由框的垂直margin计算得到。行内元素在一行中水平布置。
 二、层定位
 对每个图层进行相应的定位（相对定位relative、绝对定位absolute、固定定位fixed、无定位static）
 三、浮动
 */
 div {
 width: 200px;
 height: 200px;
 }

 .box1 {
 background: rgb(8, 240, 8);
 }

 .box2 {
 background: rgb(190, 15, 38);
 /* 相对定位，相对标签原来在页面文档中的位置进行偏移 */
 position: relative;
 right: 50px;
 top: 50px;
 }

 .box3 {
 background: rgb(202, 235, 14);
 /* 固定位置，相对于浏览器窗口进行定位 */
 position: fixed;
 left: 500px;
 top: 100px;
 }

 .box4 {
 background: cyan;
 /* 绝对定位，相对已经定位的父级元素进行偏移，如果父级都没有，则相对于左上角偏移 */
 position: absolute;
 left: 50px;
 top: 50px;
 }

 .box00 {
 width: 1000px;
 height: 100px;
 background: lightsteelblue;
 }

 .box00 div {
 /* 设置浮动，设置box00浮动不会对包含的4个div生效，只会对本标签生效 */
 float: left;
 }

 .box11 {
 background: blue;
 }

 .box22 {
 background: rgb(0, 255, 13);
 }

 .box33 {
 background: rgb(200, 25, 216);
 }

 .box44 {
 background: rgb(235, 10, 179);
 }
</style>
</head>

<body>
<div class="box1">有闲的节奏，挑拨的琴弦，在微风吹过斑驳光影的树下，倾听弦的声音，揣测着风的方向，越来越快乐，越来越幸福…… </div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box" style="height: 500px;width: 500px;background: darkolivegreen;position: relative;">
 <div class="box4"></div>
 
 <div class="box1"></div>
 <div class="box1"></div>
</div>
<hr>
<div class="box00">
 <div class="box11"></div>
 <div class="box22"></div>
 <div class="box33"></div>
 <div class="box44"></div>
</div>

</body>

</HTML></pre>
</div>
View Code</div>
练习
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<HTML>

<head>
<title>学习css</title>
<meta charset="utf-8">
<style>
 /* https://element.eleme.cn/#/zh-CN/component/container
 子元素浮动，父元素必须设置高度，否则下面的元素会塌进来。不设置高度可以用下面2个办法解决
 1、给父元素设置(用的比较多) overflow:hidden
 2、在浮动元素后，添加额外的块级子元素，并设置 clear:both
 */
 .box {
 width: 100%;
 /* height: 86px; */
 background: black;
 /* overflow:hidden */
 }

 .clear {
 clear: both
 }

 .box div {
 width: 100px;
 height: 86px;
 float: left;
 color: white;
 line-height: 86px;
 text-align: center;
 }

 .box div:hover {
 background: #00FFFF;
 }

 .content {
 height: 800px;
 background: rgb(121, 126, 131);
 margin-top: 10px;
 }

 .left {
 width: 200px;
 height: 800px;
 background: rgb(8, 107, 236);
 float: left;
 }

 .right {
 width: 800px;
 height: 800px;
 float: left;
 background: rgb(22, 199, 90);
 margin-left: 10px;
 /* none不显示、block显示 */
 display: block;
 }
</style>
</head>

<body>
<div class="box">
 <div class="box11">1</div>
 <div class="box22">2</div>
 <div class="box33">3</div>
 <div class="box44">4</div>
 <p class="clear"></p>
</div>

<div class="content">
 <div class="left"></div>
 <div class="right"></div>
</div>

</body>

</HTML></pre>
</div>
 

</div>
<div id="MySignature" role="contentinfo">
一个只会点点点的测试，有疑问可以在测试群（群号：330405140）问我 
来源：https://www.cnblogs.com/whitewall/p/15449886.html

頁: [1]

琼殿技术论坛's Archiver

前端学习二（css）