Web程序设计学习笔记＜三＞_CSS

星星与猫

已于 2022-11-05 18:16:01 修改

阅读量196

点赞数

分类专栏： Web程序设计文章标签：前端 css html web

于 2022-11-05 09:50:40 首次发布

本文链接：https://blog.csdn.net/qq_62732976/article/details/127586954

版权

Web程序设计专栏收录该内容

6 篇文章 0 订阅

订阅专栏

2.3.1 使用CSS表达页面样式

CSS(Cascading Style Sheet,层叠样式表或级联样式表 ) 可以定义HTML文档在浏览器中显示的样式。
CSS是一种标记性语言，它用于控制网页样式，并允许将网页内容与样式分离，为网页里的元素创建在浏览器中的表现样式。

内部样式表

内部样式表（Internal Style Sheet）是指在HTML文档的头部（< head>< /head>标签对之间）定义一对< style>< /style>标签。它只对当前所在的网页有效。

<head>
    <meta charset="utf-8" />  
    <title></title>
    <style>
        p{
            color:red;
            font-size :36pt;
            font-family :KaiTi ;
        }
    </style>
</head>

内嵌样式

内嵌样式（Inline Style）是指对< body>和< /body>之间的HTML标签直接设置style属性为CSS代码。它只对所在的HTML标签有效。

<body>
    <p style="text-align :center ;color:blue;">This is a paragraph！这是一个段落！</p>
    <div style="border :2px dotted green">This is a div!</div>
</body>

外部样式表

当多个HTML网页使用同样的CSS规则时，可以将这些CSS规则放在一个以.css为扩展名的独立文件中，然后在网页里使用< link>引用这个CSS文件。

<head>
    <meta charset="utf-8" />  
    <title></title>
    <style>
        p{
            color:red;
            font-size :36pt;
            font-family :KaiTi ;
        }
        div{
            text-align :center;
            font-weight :bold ;
        }
    </style>
    <link href="StyleSheet1.css" rel="stylesheet" />
</head>

· 内嵌样式表拥有最高的优先权，央视的优先级依次是内嵌、内部、外部、浏览器默认。

2.3.2 CSS选择器

CSS选择器主要包括HTML标签选择器、类选择器、ID选择器、伪类选择器、派生选择器。
一般而言，CSS选择器越特殊，它的优先级越高，也就是指向越明确，它的优先级越高。因此，选择器的优先级通常是派生选择器>ID选择器>类选择器>HTML标签选择器。
在这里插入图片描述

1. HTML标签选择器（HTML selector）

一个HTML页面有很多不同的标签组成，标签选择器直接声明哪些标签采用哪种CSS样式。

 p{
    color:red;
    font-size :36pt;
    font-family :KaiTi ;
 }
 div{
     text-align :center;
     font-weight :bold ;
 }

2. 类选择器（Class selector）

在同一个HTML文档中，当同一标签需要使用不同的样式或同一样式被不同标签使用时需要用到类选择器。

<head>
    <meta charset="utf-8" />  
    <title></title>
    <style>

        .songti{
            font-family :STSong ;

        }
    </style>
    <link href="StyleSheet1.css" rel="stylesheet" />
</head>
<body>
    <p class=" songti">This is a paragraph!这是一个段落！</p>
    <h1 class=" songti">这是一个标题</h1>
</body>
</html>

3. ID选择器（ID selector）

ID选择器可以为标有特定id的HTML元素指定特定的样式。
· 在一个HTML文档中ID选择器会使用一次，而且仅使用一次。

<head>
    <meta charset="utf-8" />  
    <title></title>
    <style>

        .songti{
            font-family :STSong ;

        }
        #title{
            font-size :36pt;
            font-weight :bold;
            color:red;
            text-decoration :underline;
        }
    </style>
    <link href="StyleSheet1.css" rel="stylesheet" />
</head>
<body>
    <h1 id="title" class=" songti">这是一个标题</h1>
</body>

4. 派生选择器（Contextual selector）

派生选择器允许用户根据文档的上下文关系来确定某个标签的样式。（派生选择器也叫上下文选择器、关联选择器、后代选择器、父子选择器）

案例一：

<head>
    <meta charset="utf-8" />  
    <title></title>
    <style>

        .songti{
            font-family :STSong ;

        }
        #title{
            font-size :36pt;
            font-weight :bold;
            color:red;
            text-decoration :underline;
        }
       div span{
            color:aqua;
        }
    </style>
    <link href="StyleSheet1.css" rel="stylesheet" />
</head>
<body>
    <h1 id="title" class=" songti">这是一个<span>Title</span>标题</h1>
    <div>这是<span>div</span>一个div!</div>
</body>

案例二：

<head>
    <meta charset="utf-8" />  
    <title></title>
    <style>
       input[type=text]:focus{
           color:red;
       }
    </style>
    <link href="StyleSheet1.css" rel="stylesheet" />
</head>
<body>
    <input id="Text1" type="text" /><br />
    <input id="Button1" type="button" value="button" />
</body>

5. 伪类选择器（Pseudo-calsses selector）

有一些特殊的HTML元素可以拥有不同的状态。例如，用于定义超链接的< a>标签可处于“ 未被访问”、“已被访问”、“鼠标悬浮其上”等几种状态。

对于这种元素，CSS使用伪类选择器为其不同的状态定义样式。

常用的伪类如下：
· a:link : 超链接的正常状态（没有任何动作前）。
· a:visited : 访问过的超链接状态。
· a:hover : 光标移动到超链接上的状态。
· a:active：选中超链接时的状态。
· p:first-line: 段落中的第一行文本。
· p:first-letter:段落中的第一个字母。
注意：
由于CSS优先级的关系（后面的比前面的优先级高），用户在写< a>的CSS时一定要按照a:link、a:visited、a:hover、a:active的顺序写。
在这里插入图片描述

<head>
    <meta charset="utf-8" />  
    <title></title>
    <style>
      a[href*="shnu"]{
          color:orange ;
      }
    </style>
    <link href="StyleSheet1.css" rel="stylesheet" />
</head>
<body>
    <a href="http://www.shnu.edu.cn">上海师范大学</a><br />
    <a href="http://www.baidu.com">百度
    </a>
</body>

在这里插入图片描述

 input[type=checkbox ]:checked {
          outline :2px solid red;
          

      }

在这里插入图片描述
nth-child主要对列表来用；

 <style>
        li:nth-child(2n+1){
            background-color:lightgray ;

        }
        li:nth-child(even){
            background-color:lightblue ;
        }
   
    </style>

在这里插入图片描述

<style>
        p::first-line{
            color-bule;
        }
        p::first-letter {
           font-size :2em;
        }
    </style>

在这里插入图片描述

CSS属性

在这里插入图片描述

2.3.3盒子模型

盒子的属性有如下部分：

· width和height:内容区的宽度和高度；

· padding：内边距，即内容区与边框的距离；

· border:内边框；

· outline：外边框；

· margin：外边距，即该元素与相邻元素或者浏览器窗口边界的距离。
在这里插入图片描述

其中，outline占据了margin的空间；例：

<body>
    <div style ="border:10px solid black;padding:10px; margin:50px;outline:green dotted 30px;">一些内容工厂程序系统中已经有技术部门、人事部门，根据职责专一化原则，发动机的管理不应该由技术部门负责，而应该设立一个专门机构来更加专业化的管理。由此程序添加了设备管理部门（EquipmentDepartment），该部门管理各种发动机方式是采用链式结构存储而不是数组的方式存储，即将发动机对象联成一个链条，添加发动机只需要将发动机添加到链首即可。而技术部门中完成各个发动机的检查方式设定和监控单位（技术部门、人事部门）就将发动机交给设备管理部门（EquipmentDapartment）。同时将原先工人随机检查机器改为检查全部发动机。程序已经基本完成，请填写程序中的空白部分。</div>
    <div>一些内容工厂程序系统中已经有技术部门、人事部门，根据职责专一化原则，发动机的管理不应该由技术部门负责，而应该设立一个专门机构来更加专业化的管理。由此程序添加了设备管理部门（EquipmentDepartment），该部门管理各种发动机方式是采用链式结构存储而不是数组的方式存储，即将发动机对象联成一个链条，添加发动机只需要将发动机添加到链首即可。而技术部门中完成各个发动机的检查方式设定和监控单位（技术部门、人事部门）就将发动机交给设备管理部门（EquipmentDapartment）。同时将原先工人随机检查机器改为检查全部发动机。程序已经基本完成，请填写程序中的空白部分。</div>
</body>

在这里插入图片描述

border-radius：添加一个圆角边框；
border-shadow：为边框设置阴影；

 <div style ="width:400px;text-align :center;margin-left:auto;margin-right:auto;border:1px solid black;
           padding:10px;border-radius:10px;box-shadow :10px 10px 5px gray;">一些内容工厂程序系统中已经有技术部门、人事部门，根据职责专一化原则，发动机的管理不应该由技术部门负责，而应该设立一个专门机构来更加专业化的管理。由此程序添加了设备管理部门（EquipmentDepartment），该部门管理各种发动机方式是采用链式结构存储而不是数组的方式存储，即将发动机对象联成一个链条，添加发动机只需要将发动机添加到链首即可。而技术部门中完成各个发动机的检查方式设定和监控单位（技术部门、人事部门）就将发动机交给设备管理部门（EquipmentDapartment）。同时将原先工人随机检查机器改为检查全部发动机。程序已经基本完成，请填写程序中的空白部分。</div>
    <div>一些内容工厂程序系统中已经有技术部门、人事部门，根据职责专一化原则，发动机的管理不应该由技术部门负责，而应该设立一个专门机构来更加专业化的管理。由此程序添加了设备管理部门（EquipmentDepartment），该部门管理各种发动机方式是采用链式结构存储而不是数组的方式存储，即将发动机对象联成一个链条，添加发动机只需要将发动机添加到链首即可。而技术部门中完成各个发动机的检查方式设定和监控单位（技术部门、人事部门）就将发动机交给设备管理部门（EquipmentDapartment）。同时将原先工人随机检查机器改为检查全部发动机。程序已经基本完成，请填写程序中的空白部分。</div>

CSS的文本属性：

在这里插入图片描述

<body>
    <div style="text-align:left;text-indent :2em;letter-spacing :0.5em;line-height:1.5em;">一些内容工厂程序系统中已经有技术部门、人事部门，根据职责专一化原则，发动机的管理不应该由技术部门负责，而应该设立一个专门机构来更加专业化的管理。由此程序添加了设备管理部门（EquipmentDepartment），该部门管理各种发动机方式是采用链式结构存储而不是数组的方式存储，即将发动机对象联成一个链条，添加发动机只需要将发动机添加到链首即可。而技术部门中完成各个发动机的检查方式设定和监控单位（技术部门、人事部门）就将发动机交给设备管理部门（EquipmentDapartment）。同时将原先工人随机检查机器改为检查全部发动机。程序已经基本完成，请填写程序中的空白部分。</div>
</body>

CSS的字体属性

在这里插入图片描述

定位和布局

在这里插入图片描述

图片固定在浏览器页面的某个位置：

<body>
    <img src="picture1.png"style="position:fixed ;right:20px;top;20px;" />
    <div style="font:italic 48px bold ;">一些内容工厂程序系统中已经有技术部门、人事部门，根据职责专一化原则，发动机的管理不应该由技术部门负责，而应该设立一个专门机构来更加专业化的管理。由此程序添加了设备管理部门（EquipmentDepartment），该部门管理各种发动机方式是采用链式结构存储而不是数组的方式存储，即将发动机对象联成一个链条，添加发动机只需要将发动机添加到链首即可。而技术部门中完成各个发动机的检查方式设定和监控单位（技术部门、人事部门）就将发动机交给设备管理部门（EquipmentDapartment）。同时将原先工人随机检查机器改为检查全部发动机。程序已经基本完成，请填写程序中的空白部分。</div>

    <div style="font:italic 48px bold ;">一些内容工厂程序系统中已经有技术部门、人事部门，根据职责专一化原则，发动机的管理不应该由技术部门负责，而应该设立一个专门机构来更加专业化的管理。由此程序添加了设备管理部门（EquipmentDepartment），该部门管理各种发动机方式是采用链式结构存储而不是数组的方式存储，即将发动机对象联成一个链条，添加发动机只需要将发动机添加到链首即可。而技术部门中完成各个发动机的检查方式设定和监控单位（技术部门、人事部门）就将发动机交给设备管理部门（EquipmentDapartment）。同时将原先工人随机检查机器改为检查全部发动机。程序已经基本完成，请填写程序中的空白部分。</div>

    <div style="font:italic 48px bold ;">一些内容工厂程序系统中已经有技术部门、人事部门，根据职责专一化原则，发动机的管理不应该由技术部门负责，而应该设立一个专门机构来更加专业化的管理。由此程序添加了设备管理部门（EquipmentDepartment），该部门管理各种发动机方式是采用链式结构存储而不是数组的方式存储，即将发动机对象联成一个链条，添加发动机只需要将发动机添加到链首即可。而技术部门中完成各个发动机的检查方式设定和监控单位（技术部门、人事部门）就将发动机交给设备管理部门（EquipmentDapartment）。同时将原先工人随机检查机器改为检查全部发动机。程序已经基本完成，请填写程序中的空白部分。</div>

    <div style="font:italic 48px bold ;">一些内容工厂程序系统中已经有技术部门、人事部门，根据职责专一化原则，发动机的管理不应该由技术部门负责，而应该设立一个专门机构来更加专业化的管理。由此程序添加了设备管理部门（EquipmentDepartment），该部门管理各种发动机方式是采用链式结构存储而不是数组的方式存储，即将发动机对象联成一个链条，添加发动机只需要将发动机添加到链首即可。而技术部门中完成各个发动机的检查方式设定和监控单位（技术部门、人事部门）就将发动机交给设备管理部门（EquipmentDapartment）。同时将原先工人随机检查机器改为检查全部发动机。程序已经基本完成，请填写程序中的空白部分。</div>

    <div style="font:italic 48px bold ;">一些内容工厂程序系统中已经有技术部门、人事部门，根据职责专一化原则，发动机的管理不应该由技术部门负责，而应该设立一个专门机构来更加专业化的管理。由此程序添加了设备管理部门（EquipmentDepartment），该部门管理各种发动机方式是采用链式结构存储而不是数组的方式存储，即将发动机对象联成一个链条，添加发动机只需要将发动机添加到链首即可。而技术部门中完成各个发动机的检查方式设定和监控单位（技术部门、人事部门）就将发动机交给设备管理部门（EquipmentDapartment）。同时将原先工人随机检查机器改为检查全部发动机。程序已经基本完成，请填写程序中的空白部分。</div>
</body>

在这里插入图片描述

列表序列属性：
在这里插入图片描述

<head>
    <meta charset="utf-8" />
    <title>网页标题</title>
    <style>
     
    </style>
</head>
<body>
    <ul style="list-style-type :simp-chinese-formal ">
        <li>非得哇如果</li>
        <li>别人说的话</li>
        <li>能有今天的和</li>
        <li>推荐你映射</li>

    </ul>
    <ul style="list-style-type :simp-chinese-informal ">
        <li>非得哇如果</li>
        <li>别人说的话</li>
        <li>能有今天的和</li>
        <li>推荐你映射</li>

    </ul>

    
    </ul>
    <ul style="list-style-type :cjk-earthly-branch ">
        <li>非得哇如果</li>
        <li>别人说的话</li>
        <li>能有今天的和</li>
        <li>推荐你映射</li>

    </ul>
</body>