• CSS基础介绍2

    CSS使用三种方式

    方式1：在标签的style属性上设置CSS样式（行内样式）

    image.png

    1. html>
    2. <html lang="en">
    3.   <head>
    4.     <meta charset="UTF-8">
    5.     <title>在标签的style属性上设置CSS样式title>
    6.   head>
    7.   <body>
    8.     <div style="width:300px;height:100px;background-color:beige">hello,北京div>
    9.     <br/>
    10.     <div style="width:300px;height:100px;background-color:beige">hello,上海div>
    11.     <br/>
    12.     <div style="width:300px;height:100px;background-color:beige">hello,天津div>
    13.     <br/>
    14.   body>
    15. html>

    问题分析
    *标签多了，样式多了，代码量庞大
    *可读性差
    *CSS代码没有复用性

    方式2：在head标签中，使用style标签来定义需要的css样式（head标签style指定）

    image.png

    1. html>
    2. <html lang="en">
    3.   <head>
    4.     <meta charset="UTF-8">
    5.     <title>在head标签中，使用style标签来定义需要的CSS样式title>
    6.     <style type="text/css">
    7.       div{
    8.         width:300px;
    9.         height:100px;
    10.         background-color: beige;
    11.       }
    12.       span{
    13.         border:1px solid red;
    14.       }
    15.     style>
    16.   head>
    17.   <body>
    18.     <div>hello,北京div>
    19.     <br/>
    20.     <div>hello,上海div>
    21.     <br/>
    22.     <span>hello,spanspan>
    23.   body>
    24. html>

    问题分析
    *只能在同一页面内复用代码维护不方便
    *实际项目中会有很多页面，需要到对应页面去修改。工作量大

    方式3：把CSS样式写成单独的CSS文件，再通过link标签引入（引入外部CSS文件）

    1. div{
    2.   width:200px;
    3.   height:100px;
    4.   background-color:brown;
    5. }
    6. span{
    7.   border:2px dashed blue;
    8. }
    1. html>
    2. <html lang="en">
    3.   <head>
    4.     <meta charset="UTF-8">
    5.     <title>把CSS样式写成单独的CSS文件，再通过link标签引入title>
    6.     
    7.     <link rel="stylesheet"type="text/css"href="./CSS/mycss.css">
    8.   head>
    9.   <body>
    10.     <div>hello,北京div>
    11.     <br/>
    12.     <div>hello,上海div>
    13.     <br/>
    14.     <span>hello,spanspan>
    15.   body>
    16. html>

    CSS选择器

    CSS元素选择器

    1.最常见的CSS选择器是元素选择器。换句话来说，文档的元素就是最基本的选择器
    2.CSS元素/标签选择器通常是某个HTML元素，比如p、h1、a div等
    3.比如：

    image.png


    4.应用实例

    image.png

    1. html>
    2. <html lang="en">
    3.   <head>
    4.     <meta charset="UTF-8">
    5.     <title>元素选择器title>
    6.     
    7.     <style type="text/css">
    8.       h1{
    9.         color:beige;
    10.       }
    11.       p{
    12.         color:blue;
    13.       }
    14.     style>
    15.   head>
    16.   <body>
    17.     <h1>夏目友人帐h1>
    18.     <p>hello,worldp>
    19.   body>
    20. html>

    ID选择器


    1.id选择器可以为标有特定id的HTML元素指定特定的样式
    2.id选择器以“#”来定义
    3.比如：

    image.png


    4.应用实例 id-selector.html

    image.png

    1. html>
    2. <html lang="en">
    3.   <head>
    4.     <meta charset="UTF-8">
    5.     <title>id 选择器title>
    6.     
    7.     <style type="text/css">
    8.       #xmyrz{
    9.         color:gold;
    10.       }
    11.       #css1{
    12.         color:green;
    13.       }
    14.     style>
    15.   head>
    16.   <body>
    17.     <h1 id="xmyrz">夏目友人帐h1>
    18.     <p id="css1">hello,worldp>
    19.   body>
    20. html>

    class选择器（类选择器）

    1.class类选择器，可以通过class属性选择去使用这个样式
    2.基本语法

    image.png


    3.应用实例 class-selector.html

    image.png

    1. html>
    2. <html lang="en">
    3.   <head>
    4.     <meta charset="UTF-8">
    5.     <title>类选择器title>
    6.     
    7.     <style type="text/css">
    8.       .class01{
    9.         color:red;
    10.       }
    11.       .class02{
    12.         color:sandybrown;
    13.       }
    14.     style>
    15.   head>
    16.   <body>
    17.     <div class="class01">韩顺平教育div>
    18.     <p class="class02">hello,worldp>
    19.   body>
    20. html>

    组合选择器

    1.组合选择器可以让多个选择器共用同一个css样式代码
    2.语法格式

    image.png


    3.应用实例 all-seletor.html

    image.png

    1. html>
    2. <html lang="en">
    3.   <head>
    4.     <meta charset="UTF-8">
    5.     <title>组合选择器title>
    6.     <style type="text/css">
    7.       /*
    8.       组合选择器
    9.       选择器1，选择器2，选择器n{属性：值；}*/
    10.       .class01,#id01{
    11.         width:300px;
    12.         height:100px;
    13.         boarder:2px solid red;
    14.       }
    15.     style>
    16.   head>
    17.   <body>
    18.     <div class="class01">韩顺平教育div>
    19.     <p id="id01">hello,world~p>
    20.   body>
    21. html>

    优先级说明

    行内样式>ID选择器>class选择器>元素选择器
    CSS课后练习
    CSS 测验

    image.png

    image.png

    image.png

    image.png

    /*顺时针方向指定的*/

    image.png

  • 相关阅读:
    C#中通过LINQtoXML加载、创建、保存、遍历XML和修改XML树
    20个Python面试题来挑战你的知识
    兄弟携手！魅族与星纪时代共同发力出行领域，沈子瑜成舵手
    ROS从入门到精通3-1：详解urdf语法并自定义机器人
    参考基因组下载 hg19 索引文件 grch38 reference genome infercnv 安装cellranger
    【MySQL基础】MySQL常用的图形化管理工具有那些？
    Spring Cloud教程 第十一弹 Spring Cloud Config连接git和数据库
    Spring Cloud之多级缓存
    递归的应用
    大一作业HTML网页作业：简单的旅游 1页 (旅游主题)
  • 原文地址：https://blog.csdn.net/m0_62110645/article/details/133443511