CSS基础【2】

最新推荐文章于 2024-07-19 15:50:46 发布

爱好是吃的蓝胖

最新推荐文章于 2024-07-19 15:50:46 发布

阅读量77

点赞数

分类专栏： css基础文章标签： css 前端 html

本文链接：https://blog.csdn.net/m0_61044901/article/details/123328046

版权

css基础专栏收录该内容

9 篇文章 0 订阅

订阅专栏

CSS的属性设置

4）超链接a样式使用的是伪类

a:link{} - 正常，未访问过的链接
       a:hover{} - 当用户鼠标放在链接上时
       a:active{} - 链接被点击的那一刻
       a:visited{} - 用户已访问过的链接

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>超链接a样式</title>
       <style>
           /*
           a:link{font-family:"黑体";font-size: 30px;}
           a:hover{font-family:"黑体";font-size: 30px;color:red;}
           a:active{font-family:"黑体";font-size: 40px;color: yellowgreen;}
           a:visited{font-family:"黑体";font-size: 50px;color:yellow;}
           */
       a:link{font-size: 10px;text-decoration: none;color: black;}
       a:hover{font-size: 10px;text-decoration: none;color:blue;}
       </style>
   </head>
   <body>
       <h4>
           a:link{} - 正常，未访问过的链接<br>
           a:hover{} - 当用户鼠标放在链接上时<br>
           a:active{} - 链接被点击的那一刻<br>
           a:visited{} - 用户已访问过的链接
       </h4>
       
       <a href="https://www.baidu.com/">新闻</a>
       </body>
</html>

5）列表属性设置

list-style-type:设置列表项标记的类型。
           none【无】 disc【实心圆】 circle【空心圆】 square【实心方块】
           decimal【数字】 lower-roman【小写罗马数字】upper-roman【大写罗马数字】
           lower-alpha【小写英文字母】 upper-alpha【大写英文字母】
       list-style-image：使用图像来替换列表项的标记
           list-style-image：url('');
       list-style-position:指示如何相对于对象的内容绘制列表项标记
           inside---包含列表标记
           outside---不包含列表标记

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>列表属性设置</title>
       <style>
           ul.test1 li{border: 20px solid red;}
           ul.test1{
               /*list-style-type:none;*/
               width: 520PX;
               list-style-image:url('imgs/tubiao1.JPG');
               list-style-position:inside;
           }
       </style>
   </head>
   <body>
       <ul class="test1">
           <li>list-style-type:设置列表项标记的类型</li>
           <li>list-style-image：使用图像来替换列表项的标记</li>
           <li>list-style-position:指示如何相对于对象的内容绘制列表项标记   </li>
       </ul>
   </body>
</html>

6)表格属性设置

border属性：设置表格边框
       border-collapse：属性设置表格的边框是否被折叠成一个单一的边框或隔开
       width和height属性定义表格的宽度和高度
       text-align属性设置水平对齐方式，向左，右，或中心
       vertical-align属性设置垂直对齐方式，顶部，底部或中间
       padding控制边框和表格内容之间的间距，应使用td和th元素
       background-color设置背景颜色

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>表格属性设置</title>
       <style>
           table{
               width:800px ;
               height: 500px;
               border-collapse:collapse;
           }
           table,tr,td{
               border:1px solid red;
               text-align:center;
               vertical-align:center;
               padding:30px
           }
       </style>
   </head>
   <body>
       <table>
           <tr>
               <td>border</td>
               <td>表格边框</td>
               <td>1px solid red</td>
               <td>table tr td</td>
           </tr>
           <tr>
               <td>border-collapse</td>
               <td>表格的边框是否被折叠成一个单一的边框或隔开</td>
               <td>collapse</td>
               <td>table</td>
           </tr>
           <tr>
               <td>width和height</td>
               <td>宽度和高度</td>
               <td>数字px</td>
               <td>table</td>
           </tr>
           <tr>
               <td>text-align</td>
               <td>水平对齐方式</td>
               <td>左中右</td>
               <td>tr,td</td>
           </tr>
           <tr>
               <td>vertical-align</td>
               <td>垂直对齐方式</td>
               <td>上中下</td>
               <td>tr,td</td>
           </tr>
           <tr>
               <td>padding</td>
               <td>单元格边框与内容的间距</td>
               <td>数字px</td>
               <td>tr,td</td>
           </tr>
       </table>
   </body>
</html>

7）边框属性设置

CSS边框属性允许你指定一个元素边框的粗细，样式【实线，虚线，双实线】，颜色
       1.border：粗细，样式【实线，虚线，双实线】，颜色【元素的4边相同样式】
       2.border-width:边框粗细 / border-style:样式 / border-color:颜色
       3.border-top-width:边框粗细 / border-top-style:样式 / border-top-color:颜色
       border-right-width:边框粗细 / border-right-style:样式 / border-right-color:颜色
       border-bottom-width:边框粗细 / border-bottom-style:样式 / border-bottom-color:颜色
border-left-width:边框粗细 / border-left-style:样式 / border-left-color:颜色
       4.border-top:粗细，样式【实线，虚线，双实线】，颜色
         border-right:粗细，样式【实线，虚线，双实线】，颜色
       border-bottom:粗细，样式【实线，虚线，双实线】，颜色
       border-left：粗细，样式【实线，虚线，双实线】，颜色

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>边框设置</title>
       <style>
           #h21{
               border:4px solid red;
           }
           #h22{border-width:5px;border-style:dashed;border-color: blue;}
           #h23{border-top-width:6px;border-top-style:solid;border-top-color:red;
           border-right-width:12px;border-right-style:dashed;border-right-color:blue;
           border-bottom-width:18px;border-bottom-style:dotted;border-bottom-color:green;
           border-left-width:24px;border-left-style:double;border-left-color:yellow}
           #h24{border-top:5px solid red;
               border-right:10px dashed blue;
               border-bottom:15px dotted green;
               border-left:20px double yellow;
           }
       </style>
   </head>7
   <body>
       <h2 id="h21">border：粗细，样式【实线，虚线，双实线】，颜色【元素的4边相同样式】</h2>
       <h2 id="h22">border-width:边框粗细 / border-style:样式 / border-color:颜色【元素的4边相同样式】</h2><br>
       <h2 id="h23">
           border-top-width:边框粗细 / border-top-style:样式 / border-top-color:颜色<br>
           border-right-width:边框粗细 / border-right-style:样式 / border-right-color:颜色<br>
           border-bottom-width:边框粗细 / border-bottom-style:样式 / border-bottom-color:颜色<br>
           border-left-width:边框粗细 / border-left-style:样式 / border-left-color:颜色</h2>
       <h2 id="h24">
               border-top:粗细，样式【实线，虚线，双实线】，颜色<br>
               border-right:粗细，样式【实线，虚线，双实线】，颜色<br>
               border-bottom:粗细，样式【实线，虚线，双实线】，颜色<br>
               border-left：粗细，样式【实线，虚线，双实线】，颜色
       </h2>
   </body>
</html>

CSS盒子模型

所有HTML元素可以看作盒子
       外边距---元素与元素之间的距离
       边框粗细---边框的薄厚
       内边距-----边框与内容之间的距离
       盒子的内容--当前元素的内容
计算一个元素的宽高：
       元素的宽度=内容宽度+左内边距+右内边框+左边距+右边框+左外边距+右外边距
       元素的高度=内容高度+上内边距+下内边框+上边距+下边框+上外边距+下外边距

8）外边距---当前元素与其他元素之间的距离

margin属性来设置外边距
       1.单独改变元素的上，下，左，右外边距：
           margin-top margin-right margin-bottom margin-left
       2.一次改变上，下，左，右外边距
           margin：数字1;[上，下，左，右外边距相等]
           margin：数字1 数字2;
               [数字1--上，下外边距相等]
               [数字2--左，右外边距相等]
           margin：数字1 数字2 数字3;
               [数字1--上外边距]
               [数字2--左，右外边距相等]
               [数字3--下外边距]
           margin：数字1 数字2 数字3 数字4;
       设置外边距的数字可以是负整数。【消除元素与body之间的默认缝隙】

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>外边框</title>
       <style>
           #div1{
               width:400px;
               height:400px;
               background-color:red;
               margin-left: 100px;
               margin-top:-10px;
               }
               img{
                   margin-top:100px;
                   margin-left:100px;
               }
       </style>
   </head>
   <body>
       <div id="div1">
           <img src="imgs/avatar5.png">
       </div>
   </body>
</html>

9）内边距【填充】---设置的是元素内容与元素边框之间的距离

padding属性来设置内边距【填充】
       1.单独改变元素的上，下，左，右内边距【填充】：
           padding-top padding-right padding-bottom padding-left
       2.一次改变上，下，左，右内边距【填充】
           padding：数字1;[上，下，左，右内边距【填充】]
           padding：数字1 数字2;
               [数字1--上，下内边距【填充】相等]
               [数字2--左，右内边距【填充】相等]
           padding：数字1 数字2 数字3;
               [数字1--上内边距【填充】]
               [数字2--左，右内边距【填充】相等]
               [数字3--下内边距【填充】]
           padding：数字1 数字2 数字3 数字4
       设置父元素的padding会撑开当前的父元素

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>内边距【填充】</title>
       <style>
           #div1{
               width: 400px;
               height: 400px;
               background-color: aqua;
               padding-left: 100px;
               padding-top: 100px;
           }
           img{
               padding-left: 100px;
               padding-top: 100px;
           }
       </style>
   </head>
   <body>
       <div id="div1">
           <img src="imgs/avatar5.png">
       </div>
   </body>
</html>

9）尺寸设置

width属性设置元素的宽度。
height属性设置元素的高度。
line-height 属性设置行高。

10）Display(显示) 与 Visibility（可见性）

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <style>
           #img1{
               border:5px solid black;
               display:none;
           }
           #img2{
               border:5px solid black;
               Visibility:visible;
           }
       </style>
   </head>
   <body>
       <h2>Display(显示)--设置一个元素应如何显示</h2>
       <h3>none--不显示</h3>
       <h3>block--显示当前元素为块级元素</h3>
       <img id="img1" src="imgs/avatar2.png">
       <h2>Visibility--指定一个元素应可见还是隐藏</h2>
       <img id="img2" src="imgs/avatar2.png">
       <h3>hidden--隐藏元素</h3>
       <h3>visible--显示元素</h3>
   </body>
</html>

爱好是吃的蓝胖

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS基础【2】

CSS的属性设置4）超链接a样式使用的是伪类 a:link{} - 正常，未访问过的链接 a:hover{} - 当用户鼠标放在链接上时 a:active{} - 链接被点击的那一刻 a:visited{} - 用户已访问过的链接...
复制链接

扫一扫