• web开发之CSS知识点总结

    CSS通常称为CSS样式或者层叠样式表，主要用于修饰HTML页面的文本内容(字体，大小，颜色)等，图片的外形(高宽，边框样式，边距)等以及版面的布局等外观样式，CSS可以使得HTML页面更美观，CSS的色调搭配使得用户体验更好，CSS+DIV样式更加灵活，更丰富多彩地展示超文本信息。

    目录

    1-CSS之元素选择器

    2-CSS元素之类选择器

    3-CSS之ID选择器

    4-CSS之组合选择器

    5-CSS之边框属性

    6-CSS之常用样式

    7-CSS之盒子模型

    8-CSS与HTML的结合方式

    1-CSS之元素选择器

    以HTML标签名称作为选择器的即为元素选择器，选择CSS样式代码，选择CSS样式名代码，作用于对应的标签名的标签上。

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>css代码格式规范title>
    6.     <style>
    7.         /**
    8.         这是css标签的规范写法,style标签放到head标签种,
    9.         里面是选择器的名称,内部是属性名:属性值
    10.          */
    11.         span{
    12.             color: blue;
    13.             font-size: 100px;
    14.             border: 1px solid red;
    15.         }
    16.         div{
    17.             color: deepskyblue;
    18.             font-size: 100px;
    19.             border: 2px solid yellow;
    20.         }
    21.     style>
    22. head>
    23. <body>
    24. <span>这是行级的块span>
    25. <div>这是块级的块div>
    26. body>
    27. html>

    2-CSS元素之类选择器

    使用类名作为选择器的名称即为类选择器，一般作用于同一元素的不同类。

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>CSS的类选择器title>
    6.     <style>
    7.         .span1{
    8.             color: red;
    9.             font-size: 100px;
    10.         }
    11.         .div1{
    12.             color: blue;
    13.             font-size: 40px;
    14.         }
    15.     style>
    16. head>
    17. <body>
    18. <span class="span1">这是一个行级的块span>
    19. <span>这也是一个行级的块span>
    20. <div class="div1">这是一个块级的块div>
    21. <div >这也是一个块级的块div>
    22. body>
    23. html>

    3-CSS之ID选择器

    该选择器适用于作用在某一个标签上，具体如下：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>CSS的ID选择器title>
    6.     <style>
    7.         #span1{
    8.             color:red;
    9.         }
    10.         #div1{
    11.             color: blue;
    12.         }
    13.         #div2{
    14.             font-size: 100px;
    15.         }
    16.     style>
    17. head>
    18. <body>
    19. <span id="span1">我是红色span>
    20. <span>我是黑色span>
    21. <div id="div1">我是蓝色div>
    22. <div id="div2">我是100px大小div>
    23. body>
    24. html>

    4-CSS之组合选择器

    组合选择器就是选择器的嵌套形式，具体如下：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>CSS之组合选择器title>
    6.     <style>
    7.         
    8.         div{
    9.             color: blue;
    10.         }
    11.         
    12.         div font{
    13.             color: red;
    14.         }
    15.  
    16.     style>
    17. head>
    18. <body>
    19. <div>
    20.     <font>我是红色font>
    21.     我是蓝色
    22. div>
    23. body>
    24. html>

    5-CSS之边框属性

    常用的边框属性包括边框，宽度，高度，背景颜色等。

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>CSS的边框属性title>
    6.     <style>
    7.         /**
    8.         四个边框属性：边框线,宽度,高度,背景颜色
    9.          */
    10.         div{
    11.             border: 1px solid red;
    12.             width: 100px;
    13.             height: 100px;
    14.             background-color: aquamarine;
    15.         }
    16.     style>
    17. head>
    18. <body>
    19. <div>这是一个边框div>
    20. body>
    21. html>

    6-CSS之常用样式

    通常默认的排版方式是从上到下，实际开发中需要左右罗列，需要使用浮动标签。

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>CSS之常用样式title>
    6.     <style>
    7.         /**
    8.         使用float标签设置浮动，可以居左或者居右的浮动
    9.          */
    10.         #div1{
    11.             background-color: red;
    12.             width: 100px;
    13.             height: 100px;
    14.             float: left;
    15.         }
    16.         #div2{
    17.             background-color: green;
    18.             width: 100px;
    19.             height: 100px;
    20.             float: left;
    21.         }
    22.         #div3{
    23.             background-color: blue;
    24.             width: 100px;
    25.             height: 100px;
    26.             float: left;
    27.         }
    28.     style>
    29. head>
    30. <body>
    31. <div id="div1">div>
    32. <div id="div2">div>
    33. <div id="div3">div>
    34. body>
    35. html>

    样式转换，使用display一般可以将某种样式转换为另外一种样式，具体如下：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>CSS样式之转换title>
    6.     <style>
    7.         div{
    8.             display: inline;
    9.         }
    10.         li{
    11.             display: inline;
    12.         }
    13.         span{
    14.             display: block;
    15.         }
    16.     style>
    17. head>
    18. <body>
    19. <h1>由块级元素到行级元素h1>
    20. <div>div1div>
    21. <div>div2div>
    22. <h2>块转换成行h2>
    23. <ul>
    24.     <li>第1行li>
    25.     <li>第2行li>
    26.     <li>第3行li>
    27. ul>
    28. <h3>行转换成块h3>
    29. <span>span1span>
    30. <span>span2span>
    31. body>
    32. html>

    7-CSS之盒子模型

    所有的HTML元素都可以看做成一个盒子，用CSS来设置元素的内边距，边框，内边距等，相当于设置盒子的样式，因此我们称为盒子模型。

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>CSS之盒子模型title>
    6.     <style>
    7.         /**
    8.         board设置边框,padding设置内边距,margin设置外边距
    9.          */
    10.         div{
    11.             border: 1px solid red;
    12.             padding: 10px;
    13.             margin: 10px;
    14.         }
    15.     style>
    16. head>
    17. <body>
    18. <div>内容体div>
    19. body>
    20. html>

    8-CSS与HTML的结合方式

    CSS与HTML的结合方式主要有两种，一种是内部结合方式，另一种是外部结合方式，具体如下：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>CSS之与HTML结合方式title>
    6.     
    7.     <link rel="stylesheet" type="text/css" href="demo1.css">
    8.     
    9.     <style>
    10.         b{
    11.             color: red;
    12.             font-size: 10px;
    13.         }
    14.     style>
    15. head>
    16. <body>
    17.  
    19. <a style="color: blue; font-size: 10px">学习编程a>
    20. <b>好好学习啊b>
    21. <b>好好学习哦b>
    22.  
    24. <c>外部样式修饰c>
    25. body>
    26. html>
  • 相关阅读:
    vue js数组对象转树形结构
    k8s的Helm
    学习Java的高级特性
    JAVA将List转成Tree树形结构数据和深度优先遍历
    【LIUNX】机器互访：免密登陆
    nginx.conf配置
    天猫店铺所有商品数据接口（Tmall.item_search_shop）
    电脑软件：推荐一款非常实用的固态硬盘优化工具
    百日完成国产数据库opengausss的开源任务--Linux中安装python3.6.X
    【附源码】计算机毕业设计SSM数据分析教学网站
  • 原文地址：https://blog.csdn.net/nuist_NJUPT/article/details/126365807