• 【CSS】

    目录

    一、语法规则

    二、CSS和HTML的结合方式

    1.在标签的style属性上设置键值对，修改标签样式

    2.在head标签中，使用style标签来定义各种自己的需要的css样式 

    3.把css样式单独写成一个css文件，再通过link标签引入即可复用

    三、CSS选择器

    1.标签名选择器

    2.id选择器

    3.类型选择器 

    4.组合选择器 

    四、常用样式

    1、 字体颜色

    2、 宽度

    3、 高度

    4、 背景颜色

    5、 红色 1 像素实线边框

    6、 字体样式

    7、 DIV 居中

    8、 文本居中：

    9、 超连接去下划线

    10、 表格细线

    11、 列表去除修饰

    一、语法规则

    选择器： 浏览器根据“选择器” 决定受 CSS 样式影响的 HTML 元素（标签） 。
    属性 (property) ：是你要改变的样式名， 并且每个属性都有一个值。 属性和值被冒号分开， 并
    由花括号包围， 这样就组成了一个完整的样式声明（declaration） ， 例如： p {color: blue}
    多个声明： 如果要定义不止一个声明， 则需要用分号将每个声明分开。 虽然最后一条声明的
    最后可以不加分号(但尽量在每条声明的末尾都加上分号)

    二、CSS和HTML的结合方式

    1.在标签的style属性上设置键值对，修改标签样式

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6. head>
    7. <body>
    8.     
    9.     <div style="border: 1px solid red;">div标签1div>
    10.     <div style="border: 1px solid red;">div标签2div>
    11.     <span style="border: 1px solid red;">span标签1span>
    12.     <span style="border: 1px solid red;">span标签2span>
    13. body>
    14. html>

    但是所有的样式都写在一行上面，代码的可读性非常差

    代码没有复用性

    2.在head标签中，使用style标签来定义各种自己的需要的css样式 

    1. xxx {
    2.     Key : value value;
    3. }
    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6.     
    7.     <style type="text/css">
    8.         /* 需求1：分别定义两个 div、span标签，分别修改每个 div 标签的样式为：边框1个像素，实线，红色，背景颜色自选。*/
    9.         div{
    10.             border: 1px solid red;
    11.             background-color: #99ff99;
    12.         }
    13.         span{
    14.             border: 1px solid red;
    15.             background-color: #99ff99;
    16.         }
    17.     style>
    18. head>
    19.  
    20. <body>
    21.     <div>div标签1div>
    22.     <div>div标签2div>
    23.  
    24.     <span>span标签1span>
    25.     <span>span标签2span>
    26. body>
    27. html>

    虽然这种方式能够复用css代码，但是只能在同一个页面中复用代码，不能再多个页面中复用css代码，维护起来不方便。 

    3.把css样式单独写成一个css文件，再通过link标签引入即可复用

     

     这是我们写在上面生成的css文件中的内容

    1. div{
    2.      border: 1px solid yellow;
    3.      background-color:blueviolet;
    4.  }
    5. span{
    6.     border: 1px solid red;
    7.     background-color:blueviolet;
    8. }

    这是我们写在别的HTML文件中的代码，其中我们引入了我们上面的样式1.css 

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6.     
    7.     <link rel="stylesheet" type="text/css" href="1.css"/>
    8.  
    9. head>
    10.  
    11. <body>
    12.     <div>div标签1div>
    13.     <div>div标签2div>
    14.  
    15.     <span>span标签1span>
    16.     <span>span标签2span>
    17. body>
    18. html>

    三、CSS选择器

    1.标签名选择器

    标签名选择器的格式

    1. 标签名{
    2.     属性： 值;
    3. }

    标签名选择器，可以决定哪些标签被动的使用

    1. html>
    2. <html>
    3. <head>
    4. 	<meta charset="UTF-8">
    5. 	<title>CSS选择器title>
    6. 	<style type="text/css">
    7. 		div{
    8. 			border: 1px solid yellow;
    9. 			color: blue;
    10. 			font-size: 30px;
    11. 		}
    12. 		span{
    13. 			border: 5px dashed  blue;
    14. 			color: yellow;
    15. 			font-size: 20px;
    16. 		}
    17. 	style>
    18. head>
    19. <body>
    20. 	
    21. 	<div>div标签1div>
    22. 	<div>div标签2div>
    23. 	<span>span标签1span>
    24. 	<span>span标签2span>
    25. body>
    26. html>

    2.id选择器

    id选择器的格式

    1. #id 属性值{
    2.     属性： 值;
    3. }

    id选择器， 可以让我们通过 id 属性选择性的去使用这个样式。

    1. html>
    2. <html>
    3. <head>
    4. 	<meta charset="UTF-8">
    5. 	<title>ID选择器title>
    6. 	<style type="text/css">
    7.  
    8. 		#id001{
    9. 			color: blue;
    10. 			font-size: 30px;
    11. 			border: 1px yellow solid;
    12. 		}
    13.  
    14. 		#id002{
    15. 			color: red;
    16. 			font-size: 20px;
    17. 			border: 5px blue dotted ;
    18. 		}
    19.  
    20. 	style>
    21. head>
    22. <body>		
    23. 	
    24. 	
    25. 	<div id="id001">div标签1div>
    26. 	<div id="id002">div标签2div>
    27. body>
    28. html>

    3.类型选择器 

    class 类型选择器的格式是：

    1. .class 属性值{
    2.     属性： 值;
    3. }

     class类型选择器，可以通过class选择器有效的、选择性地去使用这个样式

    1. html>
    2. <html>
    3. <head>
    4. 	<meta charset="UTF-8">
    5. 	<title>class类型选择器title>
    6. 	<style type="text/css">
    7. 		.class01{
    8. 			color: blue;
    9. 			font-size: 30px;
    10. 			border: 1px solid yellow;
    11. 		}
    12.  
    13. 		.class02{
    14. 			color: grey;
    15. 			font-size: 26px;
    16. 			border: 1px solid red;
    17. 		}
    18. 	style>
    19. head>
    20. <body>
    21. 	
    22.  
    23. 	<div class="class02">div标签class01div>
    24. 	<div class="class02">div标签div>
    25. 	<span class="class02">span标签class01span>
    26. 	<span>span标签2span>
    27. body>
    28. html>

    4.组合选择器 

    组合选择器的格式是：

    1. 选择器 1， 选择器 2， 选择器 n{
    2.     属性： 值;
    3. }

    组合选择器可以让多个选择器共用同一个css代码

    1. html>
    2. <html>
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>class类型选择器title>
    6.     <style type="text/css">
    7.         .class01 , #id01{
    8.             color: blue;
    9.             font-size: 20px;
    10.             border:  yellow 1px solid;
    11.         }
    12.     style>
    13. head>
    14. <body>
    15. 	
    16.    <div id="id01">div标签class01div> <br />
    17.    <span class="class01">span 标签span>  <br />
    18.    <div>div标签div> <br />
    19.    <div>div标签id01div> <br />
    20. body>
    21. html>

    四、常用样式

    1、 字体颜色

    color： red；
    颜色可以写颜色名如： black, blue, red, green 等
    颜色也可以写 rgb 值和十六进制表示值： 如 rgb(255,0,0)， #00F6DE， 如果写十六进制值必
    须加#

    2、 宽度

    width:19px;
    宽度可以写像素值： 19px；
    也可以写百分比值： 20%；

    3、 高度

    height:20px;
    高度可以写像素值： 19px；
    也可以写百分比值： 20%；

    4、 背景颜色

    background-color:#0F2D4C

    5、 红色 1 像素实线边框

    border： 1px solid red;

    6、 字体样式

    color： #FF0000； 字体颜色红色
    font-size： 20px; 字体大小

    7、 DIV 居中

    margin-left: auto;
    margin-right: auto;

    8、 文本居中：

    text-align: center;

    9、 超连接去下划线

    text-decoration: none;

    10、 表格细线

    table {
            border: 1px solid black; /*设置边框*/
            border-collapse: collapse; /*将边框合并*/
    }td,th {
            border: 1px solid black; /*设置边框*/
    }

    11、 列表去除修饰

    ul {
            list-style: none;
    }

    1. html>
    2. <html>
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>06-css常用样式.htmltitle>
    6.     <style type="text/css">
    7.  
    8.         div{
    9.             color: red;
    10.             border: 1px yellow solid;
    11.             width: 300px;
    12.             height: 300px;
    13.             background-color: #dee2ea;
    14.             font-size: 30px;
    15.             margin-left: auto;
    16.             margin-right: auto;
    17.             text-align: center;
    18.         }
    19.         table{
    20.             border: 1px red solid;
    21.             border-collapse: collapse;
    22.         }
    23.  
    24.         td{
    25.             /*添加边框*/
    26.             border: 1px red solid;
    27.         }
    28.  
    29.         a{
    30.             /*超链接取出下划线*/
    31.             text-decoration: none;
    32.  
    33.         }
    34.  
    35.         ul{
    36.             /*表格去除修饰*/
    37.             list-style: none;
    38.         }
    39.  
    40.     style>
    41. head>
    42. <body>
    43.     <ul>
    44.         <li>11111111111li>
    45.         <li>11111111111li>
    46.         <li>11111111111li>
    47.         <li>11111111111li>
    48.         <li>11111111111li>
    49.     ul>
    50.     <table>
    51.         <tr>
    52.             <td>1.1td>
    53.             <td>1.2td>
    54.         tr>
    55.     table>
    56.     <a href="http://www.baidu.com">百度a>
    57.     <div>我是div标签div>
    58. body>
    59. html>

     

  • 相关阅读:
    OPPO广告联盟战略升级，全面提升开发者变现效率
    Linux C语言开发-D2vi编辑器使用
    【redis】字符串
    rabbitMQ rascal/amqplib报错 Error: Unexpected close 排查
    --initialize specified but the data directory has files in it. Aborting. 问题解决
    MASA MAUI 预览Office文件
    [buuctf.reverse] 131-135
    高效电商数据分析：电商爬虫API与大数据技术的融合应用
    【hbuilder】运行不了部分项目 ， 打开终端 无法输入指令
    3年测试在职，月薪还不足2w，最近被裁员，用亲身经历给大家提个醒...
  • 原文地址：https://blog.csdn.net/weixin_62684026/article/details/126690075