聊聊CSS

css 的介绍

学习目标

  • 能够知道css的作用

1. css 的定义

css(Cascading Style Sheet)层叠样式表，它是用来美化页面的一种语言。

没有使用css的效果图

使用css的效果图

2. css 的作用

  1. 美化界面, 比如: 设置标签文字大小、颜色、字体加粗等样式。

  2. 控制页面布局, 比如: 设置浮动、定位等样式。

3. css 的基本语法

选择器{

样式规则

}

样式规则：

属性名1：属性值1;

属性名2：属性值2;

属性名3：属性值3;

...

选择器:是用来选择标签的，选出来以后给标签加样式。

代码示例:

div{ 
    width:100px; 
    height:100px; 
    background:gold; 
}

说明

css 是由两个主要的部分构成：选择器和一条或多条样式规则，注意:样式规则需要放到大括号里面。

4. 小结

  • css 是层叠样式表，它是用来美化网页和控制页面布局的。

  • 定义 css 的语法格式是: 选择器{样式规则}

css 的引入方式

学习目标

  • 能够知道 css 的引入三种方式

css的三种引入方式

  1. 行内式

  2. 内嵌式（内部样式）

  3. 外链式

1. 行内式

直接在标签的 style 属性中添加 css 样式

示例代码:

<div style="width:100px; height:100px; background:red ">hello</div>

优点：方便、直观。 缺点：缺乏可重用性。

2. 内嵌式（内部样式）

在<head>标签内加入<style>标签，在<style>标签中编写css代码。

示例代码:

<head>
   <style type="text/css">
      h3{
         color:red;
      }
   </style>
</head>

优点：在同一个页面内部便于复用和维护。 缺点：在多个页面之间的可重用性不够高。

3. 外链式

将css代码写在一个单独的.css文件中，在<head>标签中使用<link>标签直接引入该文件到页面中。

示例代码:

<link rel="stylesheet" type="text/css" href="css/main.css">

优点：使得css样式与html页面分离，便于整个页面系统的规划和维护，可重用性高。 缺点：css代码由于分离到单独的css文件，容易出现css代码过于集中，若维护不当则极容易造成混乱。

4. css引入方式选择

  1. 行内式几乎不用

  2. 内嵌式在学习css样式的阶段使用

  3. 外链式在公司开发的阶段使用，可以对 css 样式和 html 页面分别进行开发。

5. 小结

  • css 的引入有三种方式, 分别是行内式、内嵌式、外链式。

  • 外链式是在公司开发的时候会使用，最能体现 div+css 的标签内容与显示样式分离的思想， 也最易改版维护，代码看起来也是最美观的一种。

css 选择器

学习目标

  • 能够说出 css 选择器的种类

1. css 选择器的定义

css 选择器是用来选择标签的，选出来以后给标签加样式。

2. css 选择器的种类

  1. 标签选择器

  2. 类选择器

  3. 层级选择器(后代选择器)

  4. id选择器

  5. 组选择器

  6. 伪类选择器

3. 标签选择器

根据标签来选择标签，以标签开头，此种选择器影响范围大，一般用来做一些通用设置。

示例代码

<style type="text/css">
    p{
        color: red;
    }
</style>
​
<div>hello</div>
<p>hello</p>

4. 类选择器

根据类名来选择标签，以 . 开头, 一个类选择器可应用于多个标签上，一个标签上也可以使用多个类选择器，多个类选择器需要使用空格分割，应用灵活，可复用，是css中应用最多的一种选择器。

示例代码

<style type="text/css">
    .blue{color:blue}
    .big{font-size:20px}
    .box{width:100px;height:100px;background:gold} 
</style>
​
<div class="blue">这是一个div</div>
<h3 class="blue big box">这是一个标题</h3>
<p class="blue box">这是一个段落</p>

5. 层级选择器(后代选择器)

根据层级关系选择后代标签，以选择器1 选择器2开头，主要应用在标签嵌套的结构中，减少命名。

示例代码

<style type="text/css">
    div p{
        color: red;
    }
    .con{width:300px;height:80px;background:green}
    .con span{color:red}
    .con .pink{color:pink}
    .con .gold{color:gold}    
</style>
​
<div>
    <p>hello</p>
</div>
​
<div class="con">
    <span>哈哈</span>
    <a href="#" class="pink">百度</a>
    <a href="#" class="gold">谷歌</a>
</div>
<span>你好</span>
<a href="#" class="pink">新浪</a>

注意点: 这个层级关系不一定是父子关系，也有可能是祖孙关系，只要有后代关系都适用于这个层级选择器

6. id选择器

根据id选择标签，以#开头, 元素的id名称不能重复，所以id选择器只能对应于页面上一个元素，不能复用，id名一般给程序使用，所以不推荐使用id作为选择器。

示例代码

<style type="text/css">
    #box{color:red} 
</style>
​
<p id="box">这是一个段落标签</p>   <!-- 对应以上一条样式，其它元素不允许应用此样式 -->
<p>这是第二个段落标签</p> <!-- 无法应用以上样式，每个标签只能有唯一的id名 -->
<p>这是第三个段落标签</p> <!-- 无法应用以上样式，每个标签只能有唯一的id名  -->

注意点: 虽然给其它标签设置id=“box”也可以设置样式，但是不推荐这样做，因为id是唯一的，以后js通过id只能获取一个唯一的标签对象。

7. 组选择器

根据组合的选择器选择不同的标签，以 , 分割开, 如果有公共的样式设置，可以使用组选择器。

示例代码

<style type="text/css">
    /* 定义公共属性 */
    .box1,.box2,.box3{width:100px;height:100px}
    /* 定义个性 */
    .box1{background:red}
    .box2{background:pink}
    .box2{background:gold}
</style>
​
<div class="box1">这是第一个div</div>
<div class="box2">这是第二个div</div>
<div class="box3">这是第三个div</div>

8. 伪类选择器

用于向选择器添加特殊的效果, 以 : 分割开, 当用户和网站交互的时候改变显示效果可以使用伪类选择器

示例代码

<style type="text/css">
    .box1{width:100px;height:100px;background:gold;}
    .box1:hover{width:300px;}
</style>
​
<div class="box1">这是第一个div</div>

9. 小结

  • css 选择器就是用来选择标签设置样式的

  • 常用的 css 选择器有六种，分别是:

    1. 标签选择器

    2. 类选择器

    3. 层级选择器(后代选择器)

    4. id选择器

    5. 组选择器

    6. 伪类选择器

css 属性

学习目标

  • 能够知道常用的样式属性

我们知道 css 作用是美化 HTML 网页和控制页面布局的,接下来我们来学习一下经常使用一些样式属性。

1. 布局常用样式属性

  • width 设置元素(标签)的宽度，如：width:100px;

  • height 设置元素(标签)的高度，如：height:200px;

  • background 设置元素背景色或者背景图片，如：background:gold; 设置元素的背景色, background: url(images/logo.png); 设置元素的背景图片。

  • border 设置元素四周的边框，如：border:1px solid black; 设置元素四周边框是1像素宽的黑色实线

  • 以上也可以拆分成四个边的写法，分别设置四个边的：

  • border-top 设置顶边边框，如：border-top:10px solid red;

  • border-left 设置左边边框，如：border-left:10px solid blue;

  • border-right 设置右边边框，如：border-right:10px solid green;

  • border-bottom 设置底边边框，如：border-bottom:10px solid pink;

2. 文本常用样式属性

  • color 设置文字的颜色，如： color:red;

  • font-size 设置文字的大小，如：font-size:12px;

  • font-family 设置文字的字体，如：font-family:'微软雅黑';为了避免中文字不兼容，一般写成：font-family:'Microsoft Yahei';

  • font-weight 设置文字是否加粗，如：font-weight:bold; 设置加粗 font-weight:normal 设置不加粗

  • line-height 设置文字的行高，如：line-height:24px; 表示文字高度加上文字上下的间距是24px，也就是每一行占有的高度是24px

  • text-decoration 设置文字的下划线，如：text-decoration:none; 将文字下划线去掉

  • text-align 设置文字水平对齐方式，如text-align:center 设置文字水平居中（left/center/right)

  • text-indent 设置文字首行缩进，如：text-indent:24px; 设置文字首行缩进24px

3. 布局常用样式属性示例代码

<style>
​
    .box1{
        width: 200px; 
        height: 200px; 
        background:yellow; 
        border: 1px solid black;
    }
​
    .box2{
        /* 这里是注释内容 */
        /* 设置宽度 */
        width: 100px;
        /* 设置高度 */
        height: 100px;
        /* 设置背景色 */
        background: red;
        /* 设置四边边框 */
        /* border: 10px solid black; */
        border-top: 10px solid black;
        border-left: 10px solid black;
        border-right: 10px solid black;
        border-bottom: 10px solid black;
        /* 设置内边距， 内容到边框的距离，如果设置四边是上右下左 */
        /* padding: 10px;   */
        padding-left: 10px;
        padding-top: 10px;
        /* 设置外边距，设置元素边框到外界元素边框的距离 */
        margin: 10px;
        /* margin-top: 10px;
        margin-left: 10px; */
        float: left;
    }
​
    .box3{
        width: 48px; 
        height: 48px; 
        background:pink; 
        border: 1px solid black;
        float: left;
    }
​
</style>
​
<div class="box1">
    <div class="box2">
        padding 设置元素包含的内容和元素边框的距离
    </div>
    <div class="box3">
    </div>
</div>

4. 文本常用样式属性示例

<style>
    p{
       /* 设置字体大小  浏览器默认是 16px */
       font-size:20px;
       /* 设置字体 */
       font-family: "Microsoft YaHei"; 
       /* 设置字体加粗 */
       font-weight: bold;
       /* 设置字体颜色 */
       color: red;
       /* 增加掉下划线 */
       text-decoration: underline;
       /* 设置行高  */
       line-height: 100px;
       /* 设置背景色 */
       background: green;
       /* 设置文字居中 */
       /* text-align: center; */
       text-indent: 40px;
    }
​
    a{
        /* 去掉下划线 */
        text-decoration: none;
    }
</style>
​
<a href="#">连接标签</a>
<p>
    你好，世界!
</p>

5. 小结

  • 设置不同的样式属性会呈现不同网页的显示效果

  • 样式属性的表现形式是: 属性名:属性值;

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/493964.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

tensorflow安装以及在Anaconda中安装使用

tensorflow安装以及在Anaconda中安装使用

在遥感领域进行深度学习时&#xff0c;通常使用python进行深度学习&#xff0c;会使用到tensorflow的安装&#xff0c;今天小编就给大家介绍如何在Anaconda中安装tensorflow&#xff01; 下载Anaconda Index of /anaconda/archive/ | 清华大学开源软件镜像站 | Tsinghua Open…
阅读更多...
【b站李炎恢】Vue.js Element UI | 十天技能课堂 | 更新中... | 李炎恢

【b站李炎恢】Vue.js Element UI | 十天技能课堂 | 更新中... | 李炎恢

课程地址&#xff1a;【Vue.js Element UI | 十天技能课堂 | 更新中... | 李炎恢】 https://www.bilibili.com/video/BV1U54y127GB/?share_sourcecopy_web&vd_sourceb1cb921b73fe3808550eaf2224d1c155 备注&#xff1a;虽然标题声明还在更新中&#xff0c;但是看一些常用…
阅读更多...
netty构建udp服务器以及发送报文到客户端客户端详细案例

netty构建udp服务器以及发送报文到客户端客户端详细案例

目录 一、基于netty创建udp服务端以及对应通道设置关键 二、发送数据 三、netty中的ChannelOption常用参数说明 1、ChannelOption.SO_BACKLOG 2、ChannelOption.SO_REUSEADDR 3、ChannelOption.SO_KEEPALIVE 4、ChannelOption.SO_SNDBUF和ChannelOption.SO_RCVBUF 5、Ch…
阅读更多...
任何程序员错过这些宝藏接单平台，都会难过好吗?

任何程序员错过这些宝藏接单平台，都会难过好吗?

财富自由何时才能实现&#xff1f;首先&#xff0c;可以很负责地告诉你&#xff1a;安安心心地当一头牛马肯定是不能&#xff01;兢兢业业十几年&#xff0c;归来仍是马喽。 说实在的&#xff0c;这两年经济下行&#xff0c;互联网红利又日渐褪去。前者既争又抢&#xff0c;后…
阅读更多...
【前端学习——js篇】5.事件循环

【前端学习——js篇】5.事件循环

详细&#xff1a;https://github.com/febobo/web-interview 5.事件循环 js是一种单线程语言&#xff0c;同一时间内只能做一件事情&#xff0c;为了避免单线程阻塞的方法就是事件循环。 在javascript当中&#xff0c;所有的任务都可以分为&#xff1a; 同步任务&#xff1a;按…
阅读更多...
【Linux】详解进程终止进程等待

【Linux】详解进程终止进程等待

一、页表&&写时拷贝的进一步理解 页表中不仅仅只有虚拟地址到物理地址的映射&#xff0c;还包括了很多选项&#xff0c;其中就包括了映射条目的权限。当我们进程的代码和数据加载到内存并和进程地址空间建立映射关系时&#xff0c;如果数据的内容不允许被修改&#xff…
阅读更多...
阿里云服务器多少钱一个月？低至5元1个月

阿里云服务器多少钱一个月？低至5元1个月

阿里云服务器一个月多少钱&#xff1f;最便宜5元1个月。阿里云轻量应用服务器2核2G3M配置61元一年&#xff0c;折合5元一个月&#xff0c;2核4G服务器30元3个月&#xff0c;2核2G3M带宽服务器99元12个月&#xff0c;轻量应用服务器2核4G4M带宽165元12个月&#xff0c;4核16G服务…
阅读更多...
elementui日期时间选择框自定义组件

elementui日期时间选择框自定义组件

1.需求场景 业务中需要&#xff0c;日期选择框方便客户对日期的选择&#xff08;比如近5天&#xff0c;本周&#xff0c;本月&#xff0c;本年等等&#xff09;&#xff0c;并按小时展示。 2.组件代码MyDateTimeChange.vue <template><el-date-pickerv-model"…
阅读更多...
Rust使用原始字符串字面量实现Regex双引号嵌套双引号正则匹配

Rust使用原始字符串字面量实现Regex双引号嵌套双引号正则匹配

rust使用Regex实现正则匹配的时候&#xff0c;如果想实现匹配双引号&#xff0c;就需要使用原始字符串字面量&#xff0c;不然无法使用双引号嵌套的。r#"..."# 就表示原始字符串字面量。 比如使用双引号匹配&#xff1a; use regex::Regex;fn main() {println!(&qu…
阅读更多...
c# RichTextbox添加行号

c# RichTextbox添加行号

使用另一个RichTextBox放在要添加行号的左边 使用以下代码 //uiRichTextBox1为右侧文本框&#xff0c;uiRichTextBox2为左侧文本框int lineIndex 0;private void uiRichTextBox1_TextChanged(object sender, EventArgs e){if (lineIndex > uiRichTextBox1.Lines.Length){L…
阅读更多...
全国地质灾害点shp崩塌滑坡泥石流空间分布地质灾害详查等数据集

全国地质灾害点shp崩塌滑坡泥石流空间分布地质灾害详查等数据集

地质灾害是指在自然或者人为因素的作用下形成的&#xff0c;对人类生命财产造成的损失、对环境造成破坏的地质作用或地质现象。地质灾害在时间和空间上的分布变化规律&#xff0c;既受制于自然环境&#xff0c;又与人类活动有关&#xff0c;往往是人类与自然界相互作用的结果。…
阅读更多...
【项目技术介绍篇】如何在本地运行若依项目

【项目技术介绍篇】如何在本地运行若依项目

作者介绍&#xff1a;本人笔名姑苏老陈&#xff0c;从事JAVA开发工作十多年了&#xff0c;带过大学刚毕业的实习生&#xff0c;也带过技术团队。最近有个朋友的表弟&#xff0c;马上要大学毕业了&#xff0c;想从事JAVA开发工作&#xff0c;但不知道从何处入手。于是&#xff0…
阅读更多...
Java——注解和注释

Java——注解和注释

0 注解和注释的区别 在博主刚开始学习java语言的时候&#xff0c;经常把注释和注解搞混淆&#xff0c;误认为这两个是类似的东西&#xff0c;其实它们完全不是一个东西。 注释&#xff1a; 注释是程序员在代码中添加的说明性文字&#xff0c;用于解释代码的功能、目的或实现…
阅读更多...
在ubuntu上编译prometheus

在ubuntu上编译prometheus

大纲 系统环境编译环境默认的版本GolangNodejsNPM 更新Nodejs和NPMNodejsNPM 编译运行 prometheus的编译并不难&#xff0c;核心是要将编译环境配置到符合要求的地步&#xff0c;否则就会出现各种错误&#xff0c;而且难以排查。 我们主要需要关心go、npm和nodejs的版本。 以下…
阅读更多...
前端Web移动端学习day05

前端Web移动端学习day05

移动 Web 第五天 响应式布局方案 媒体查询Bootstrap框架 响应式网页指的是一套代码适配多端&#xff0c;一套代码适配各种大小的屏幕。 共有两种方案可以实现响应式网页&#xff0c;一种是媒体查询&#xff0c;另一种是使用bootstrap框架。 01-媒体查询 基本写法 max-wid…
阅读更多...
饼图渲染的关键

饼图渲染的关键

1) 创建一个DOM对象,有自定义的高和宽. 2) 引入Echarts软件包并导入到对应文件内 npm i Echarts import 文件.js script src.../文件 3) 初始化一个对象 4) 对象的方法实现饼图渲染 data内的数据,且当一个对象已经渲染一遍,再执行这个,会对setOption的参数进行更新,其…
阅读更多...
定制化区块链交易所开发：Dapp、DeFi和IDO的全方位解决方案

定制化区块链交易所开发：Dapp、DeFi和IDO的全方位解决方案

随着区块链技术的不断发展&#xff0c;区块链交易所已经成为数字资产交易的主要场所之一。然而&#xff0c;由于不同项目的需求和特点各不相同&#xff0c;通用的交易所往往无法满足所有的需求。因此&#xff0c;定制化区块链交易所的需求逐渐增加&#xff0c;以满足不同项目的…
阅读更多...
JVM（六）——内存模型与高效并发

JVM（六）——内存模型与高效并发

内存模型与高效并发 一、java 内存模型 【java 内存模型】是 Java Memory Model&#xff08;JMM&#xff09; 简单的说&#xff0c;JMM 定义了一套在多线程读写共享数据时&#xff08;成员变量、数组&#xff09;时&#xff0c;对数据的可见性、有序 性、和原子性的规则和保障…
阅读更多...
MySQL修改root用户的密码

MySQL修改root用户的密码

在Windows上重置MySQL的root用户密码可以通过以下步骤进行&#xff1a; 停止MySQL服务&#xff1a;使用快捷键WINR打开运行窗口&#xff0c;输入cmd进入命令行。在命令行中输入net stop mysql来关闭MySQL服务。启动MySQL跳过授权表&#xff1a;将目录切换到MySQL安装目录下的b…
阅读更多...
CSMM软件过程能力成熟度模型

CSMM软件过程能力成熟度模型

软件过程能力成熟度模型旨在通过提升组织的软件开发能力帮助顾客提升软件的业务价值。 本模型借鉴吸收了软件工程、项目管理、产品管理、组织治理、质量管理、卓越绩效管理、精益软件开发等领域的优秀实践&#xff0c;为组织提供改进和评估软件过程能力的一个成熟度模型。 总体…
阅读更多...
最新文章

Copyright @ 2022~2023