Web前端开发之CSS_1

  • CSS
  • 选择器
  • 字体属性
  • 背景属性
  • 文本属性
  • 表格属性

1. CSS

1.1 CSS简介

        CSS（Cascading Style Sheets）层叠样式表，又叫级联样式表，简称样式表。CSS文件后缀名为 .css 。CSS用于HTML文档中元素样式的定义。使用CSS可以让网页具有美观一致的页面

        CSS规则由两个主要的部分构成：选择器，以及一条或多条声明(样式)。

 语法：

  • 选择器通常是需要改变样式的HTML元素
  • 每条声明由一个属性和一个值组成
  • 属性是希望设置的样式属性，每个属性有一个值。属性和值被冒号分开

 

1.2 CSS的引入方式
  • 内联样式（行内样式）---- 缺乏整体性和规划性，不利于维护，维护成本高

        要使用内联样式，需要在相关的标签内使用样式(style)属性。Style属性可包含任何CSS属性

<p style="background: orange; font-size: 24px;">CSS内联样式</p>

  • 内部样式 ---- 单个页面内的CSS代码具有统一性和规划性，便于维护，但多个页面易混乱

        当单个文档需要特殊的样式时，就应该使用内部样式表，可使用<style>标签在文档头部定义内部样式表。

<head>

        <style>

                h1{

                        background:red;

                }

        </style>

</head>

  • 外部样式（推荐）

        当样式需要应用于很多页面时，外部样式表将是最理想的选择。在使用外部样式表的情况下，可以通过改变一个文件来改变整个站点的外观。每个页面使用<link>标签链接到样式表。<link>标签在文档的头部。

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

2. 选择器（为元素匹配样式）

2.1 全局选择器 

        可以与任何元素匹配，优先级最低，一般做样式初始化

*{

        margin:0;

        padding:0;

}

2.2 元素选择器

        HTML文档中的元素，p、b、div、a、img、body等

        标签选择器，选择的是页面上所有这种类型的标签，所以经常描述“共性”，无法描述某个元素的“个性”。

<p>学完<span>前端</span>，继续学Java</p>

<style>

        span{

            color: red;

        }

</style>

  • 所有的标签，都可以是选择器。比如ul、li、label、dt、dl、input、div等
  • 无论这个标签藏的多深，一定能够被选择上
  • 选择的所有，而不是一个
2.3 类选择器   ---- 灵活

        规定用圆点 . 来定义，针对想要的所有标签使用

<h2 class="oneclass">你好</h2>

/*定义类选择器*/

.oneclass{

        width:800px;

}

class属性特点：

  • 类标签可以被多种标签使用
  • 类名不能以数字开头
  • 同一标签可以使用多个类选择器，用空格隔开

<h3 class="classone classtwo">一个h3标题</h3>

2.4 ID选择器

        针对某一个特定的标签使用，只能使用一次。css中的ID选择器以 # 定义

<h2 id="mytitle">你好</h2>

<style>

        #mytitle{

            border:3px dashed green;

        }

</style>

  • ID是唯一的
  • ID不能以数字开头
2.5 选择器的使用
合并选择器

语法：选择器1,选择器2,…{ }，作用：提取共同的样式，减少重复代码

.header,.footer{

        height:300px;

}

选择器的优先级

CSS中，权重用数字衡量

  • 元素选择器的权重为：1
  • class选择器的权重为：10
  • id选择器的权重为：100
  • 内联样式的权重为：1000

优先级从高到低：行内样式 > ID选择器 > 类选择器 > 元素选择器

3. 字体属性

        CSS字体属性定义字体颜色、大小、加粗、文字样式

  • color，规定文本的颜色
<style>
        p{
            color: red;
            color: #00ff00;
            color: rgb(0, 0, 255);
            color: rgba(255, 0, 0, .5);
        }
    </style>
  • font-size，设置文本大小，chrome接受最小字体是12px
  • font-weight，设置文本的粗细
值描述
bold定义粗体字符
bolder定义更粗的字符
lighter定义更细的字符
100~900定义由细到粗 400等同默认，而700等同于bold

h1{font-weight:normal;}

  •  font-style，指定文本的字体样式
值描述
normal默认值
italic定义斜体字
  •  font-family，指定一个元素的字体

font-family:"Microsoft YaHei","Simsun","SimHei";

//每个值用逗号隔开

//如果字体名称包含空格，它必须加上引号

4. 背景属性

CSS背景属性主要有以下几个：

属性描述
background-color设置背景颜色
background-image设置背景图片
background-position设置背景图片显示位置
background-repeat设置背景图片如何填充
background-size设置背景图片大小属性
  • background-color属性

<div class="box"></div>

<style>

        .box{

            width: 400px;

            height:400px;

            background-color: palevioletred;

        }

</style>

  • background-image属性 ---- 设置元素背景图片

        元素的背景是元素的总大小，包括填充和边界(不包括外边距)。默认情况background-image属性放置在元素的左上角，如果图像不够大的话会在垂直和水平方向平铺图像，如果图像大小超过元素大小，则从图像的左上角显示元素大小的那部分。

<div class="box"></div>

<style>

        .box2{

            width: 400px;

            height: 400px;

            background-image: url("1.webp");

        }

</style>

  • background-repeat属性 ---- 设置如何平铺背景图像
值说明
repeat默认值
repeat-x只向水平方向平铺
repeat-y只向垂直方向平铺
no-repeat不平铺
  • background-size属性 ---- 设置背景图像的大小
值说明
length设置背景图片宽度和高度，第一个值宽度，第二个值高度；如果只设置一个，第二个值auto
percentage计算相对位置区域的百分比，第一个值宽，第二个值高度；如果只设置一个，第二个值auto
cover保持图片纵横比并将图片缩放成完全覆盖背景区域的最小大小 ---- 图片有裁剪
contain保持图片纵横比并将图片缩放成适合背景定位区域的最大大小 ---- 未充满整个容器
  • background-position属性 ---- 设置背景图片起始位置，默认值是：0% 0%
值说明
left top左上角
left center左中
left bottom左下
right top右上角
right center右中
right bottom右下
center top中上
center center中中
center bottom中下
x% y%第一个值水平位置，第二个垂直位置，左上角0% 0%，右下角100% 100%；默认左上角0% 0%，如果只指定一个值，其他值默认50%
xpos ypos单位是像素

5. 文本属性

  • text-align ---- 指定元素文本的水平对齐方式
值描述
left文本居左排列，默认值
right把文本排列到右边
center把文本排列到中间
  • text-decoration ---- 规定添加到文本的修饰，下划线、上划线、删除线等
值描述
underline定义下划线
overline定义 上划线
line-through定义删除线
  • text-transform ---- 控制文本的大小写
值描述
captialize定义每个单词开头大写
uppercase定义全部大写字母
lowercase定义全部小写字母
  • text-indent ---- 规定文本块中首行文本的缩进

p{

     text-indent: 30px;

}

负值是允许的，如果值为负数，将第一行左缩进。

6. 表格属性

  • 表格边框 --- 指定CSS表格边框，使用border属性

table,td{

      border: 1px solid red;

}

  • 折叠边框 ---- border-collapse 属性设置表格边框是否被折叠成一个单一的边框或隔开

table,td{  border: 1px solid red; }

table{

     border-collapse: collapse;

}

  • 表格宽度和高度 ---- width 和 height属性定义表格的宽度和高度

table{ width: 100%; }

td{ height: 50px; }

  • 表格文字对齐 --- 表格中的文本对齐和垂直对齐属性

// text-align属性设置水平对齐方式，向左、右、或居中

td{ text-align:center;}

// 垂直对齐属性设置垂直对齐

td{ height:50px; vertical-align:bottom;}

  • 表格填充padding ----如果在表的内容中控制空格之间的边框，使用 td 和 th 元素的填充属性

td{

            text-align: center;

            vertical-align: top;

            padding: 20px;

}

  • 表格颜色 ---- 指定边框的颜色，和 th 元素的文本和背景颜色

table,td,th { border:1px solid green; }

td { background-color:green; color:white; }

补充：td 和 th 都属于 tr 子元素，td 表示内容单元格，是table data的意思；th 表示标题，一般用在一列的第一格，里面的内容会自动加粗加黑，是table heading的意思。

<table>
    <tr>
       <th>姓名</th>
    </tr>
    <tr>
       <td>张三</td>
    </tr>
    <tr>
       <td>李四</td>
    </tr>
</table>

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

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

相关文章

算法 || 二分查找

算法 || 二分查找

目录 二分查找 在排序数组中查找元素的第一个和最后一个位置 搜索插入位置 一个数组经过划分后具有二段性的都可以用二分查找 二分查找 704. 二分查找 - 力扣&#xff08;LeetCode&#xff09; ​ 暴力解法&#xff1a;直接遍历数组&#xff0c;找到 target 便返回下标&am…
阅读更多...
【blog项目】layui与jquery冲突导致鼠标悬停事件失效、如何调用layui.use()作用域里的方法

【blog项目】layui与jquery冲突导致鼠标悬停事件失效、如何调用layui.use()作用域里的方法

blog项目前台展示——查询数据库中的文章类型并展示时出现的bug 1 正常演示 2 用jquery查询数据库并添加到页面后 3 相关代码 <script src"/static/jquery-2.1.4.js"></script> <script src"/static/layui/layui.js"></script> …
阅读更多...
排序算法-计数排序

排序算法-计数排序

一、计数排序 这种排序算法 是利用数组下标来确定元素的正确位置的。 如果数组中有20个随机整数&#xff0c;取值范围为0~10&#xff0c;要求用最快的速度把这20个整数从小到大进行排序。 很大的情况下&#xff0c;它的性能甚至快过那些时间复杂度为O(nlogn&#xff09;的排序。…
阅读更多...
使用PyCharm开发工具创建工程

使用PyCharm开发工具创建工程

一. 简介 前面文章实现了开发 python程序使用的 开发工具PyCharm&#xff0c;本文来学习使用 PyCharm开发工具创建一个 python工程。 二. 使用PyCharm开发工具创建工程 1. 首先&#xff0c;打开 PyCharm开发工具&#xff0c;打开 "New project" 选项&#xff1a; …
阅读更多...
git如何查询回退之前的提交记录

git如何查询回退之前的提交记录

git如何查询回退之前的提交记录 使用 git reflog 命令&#xff1a; 使用 git reflog 命令&#xff1a; git refloggit reflog 显示的是你的本地引用日志&#xff0c;它包含了所有HEAD指向变更的历史记录&#xff0c;即使那些已经被删除的提交也会出现在这里。当你误操作回退并…
阅读更多...
一款可视化正则表达式工具

一款可视化正则表达式工具

regex-vis是一款在线免费且可视化的正则表达式工具 界面图&#xff1a; 只能输入由26个英文字母组成的字符串 ^[A-Za-z]$ 只能输入数字 ^[0-9]*$测试错误 测试正确 快来感受一下叭 官方网址&#xff1a; Regex VisRegex visualizer & editor, make the regular expr…
阅读更多...
Java根据模板动态生成Pdf(添加页码、文件加密、Spire免费版本10页之后无法显示问题、嵌入图片添加公章、转Base64)

Java根据模板动态生成Pdf(添加页码、文件加密、Spire免费版本10页之后无法显示问题、嵌入图片添加公章、转Base64)

Java根据模板动态生成Pdf&#xff1a;添加页码、文件加密、Spire免费版本10页之后无法显示问题、嵌入图片添加公章、转Base64 引言【Java根据模板动态生成Pdf资源地址】示例一&#xff1a;动态生成带页码的PDF报告示例二&#xff1a;加密PDF以保护敏感信息示例三&#xff1a;应…
阅读更多...
设计模式——终止模式之两阶段终止模式

设计模式——终止模式之两阶段终止模式

文章目录 1. 错误思路2. 两阶段终止模式2.1 利用 isInterrupted2.2 利用停止标记interrupt-打断park Two Phase Termination 在一个线程 T1 中如何“优雅”终止线程 T2&#xff1f;这里的【优雅】指的是给 T2 一个料理后事的机会。 1. 错误思路 使用线程对象的 stop() 方法停…
阅读更多...
容器工作流

容器工作流

背景 目前某平台使用计算容器和解析容器&#xff0c;这两种容器目前通过rabbitmq消息来进行链接&#xff0c;形成容器工作流&#xff0c;使用容器工作流框架可以省去两个容器中间环节的控制&#xff0c;不需要再使用java代码对容器的操作&#xff0c;通过容器工作流框架即可控…
阅读更多...
Docker常见问题排查思路与实战

Docker常见问题排查思路与实战

Docker作为一种流行的容器化技术&#xff0c;已经在众多场景中得到广泛应用。然而&#xff0c;在使用过程中&#xff0c;我们难免会遇到各种问题。本文将介绍一些常见的Docker问题及其排查思路&#xff0c;并通过实战案例帮助大家更好地理解和应对这些挑战。 1. Docker容器启动…
阅读更多...
OpenHarmony语言基础类库【@ohos.util.LinkedList (线性容器LinkedList)】

OpenHarmony语言基础类库【@ohos.util.LinkedList (线性容器LinkedList)】

LinkedList底层通过双向链表实现&#xff0c;双向链表的每个节点都包含对前一个元素和后一个元素的引用。当需要查询元素时&#xff0c;可以从头遍历&#xff0c;也可以从尾部遍历&#xff0c;插入、删除效率高&#xff0c;查询效率低。LinkedList允许元素为null。 LinkedList…
阅读更多...
数据库和表创建练习

数据库和表创建练习

一丶要求 1.创建一个数据库db_classes 2 创建一行表db_hero 3. 将四大名著中的常见人物插入这个英雄表 二丶创建db_classes一个数据库, 使用数据库默认的字符集 create database db_classes; 三丶创建一行表db_hero 1.先切换到我们创建的db_classes;数据库中 use db_class…
阅读更多...
RabbitMQ中的交换机类型

RabbitMQ中的交换机类型

交换机类型 可以看到&#xff0c;在订阅模型中&#xff0c;多了一个exchange角色&#xff0c;而且过程略有变化&#xff1a; Publisher&#xff1a;生产者&#xff0c;不再发送消息到队列中&#xff0c;而是发给交换机 Exchange&#xff1a;交换机&#xff0c;一方面&#xff…
阅读更多...
03 后端入参校验：自定义注解实现

03 后端入参校验：自定义注解实现

03 后端入参校验&#xff1a;自定义注解实现 一、前言二、实现1、新建Spring Boot项目2、引入依赖3、新建注解类4、新建校验器5、全局异常处理器6、编写Controller7、新建实体类8、启动并测试 一、前言 在 Java 后端开发中&#xff0c;为了实现入参校验&#xff0c;常常会使用…
阅读更多...
【SpringCloud】CircuitBreaker断路器之Resilience4J快速入门

【SpringCloud】CircuitBreaker断路器之Resilience4J快速入门

【SpringCloud】CircuitBreaker断路器之Resilience4J快速入门 文章目录 【SpringCloud】CircuitBreaker断路器之Resilience4J快速入门1. 概述2. 服务熔断服务降级(CircuitBreaker)2.1 案例说明2.1.1 基于计数的滑动窗口2.1.2 测试2.2.1 基于时间的滑动窗口2.2.2 测试 3. 隔离(B…
阅读更多...
多行Textview 计算切分后的长度，并回退长度

多行Textview 计算切分后的长度，并回退长度

实现类似的效果&#xff0c;一个多行的 textview&#xff0c; 如果赋值一个超长的字符&#xff0c;尾部长度回退部分&#xff0c;并添加 ... 最后添加一个详情按钮。 如果不超长则不显示详情 效果如图&#xff1a; 获取截断之后的字符长度 fun getLimitedCharacterCount(textV…
阅读更多...
更新！！！Unity移动端游戏性能优化简谱

更新！！！Unity移动端游戏性能优化简谱

UWA官方出品&#xff0c;结合多年优化经验撰写了《Unity移动端游戏性能优化简谱》&#xff0c;文章从Unity移动端游戏优化的一些基础讨论出发&#xff0c;例举和分析了近几年基于Unity开发的移动端游戏项目中最为常见的部分性能问题&#xff0c;并展示了如何使用UWA的性能检测工…
阅读更多...
Java web应用性能分析之【6种OOM监控和分析】

Java web应用性能分析之【6种OOM监控和分析】

Java web应用性能分析之【Linux服务器性能监控分析概叙】-CSDN博客 Java web应用性能分析概叙-CSDN博客 Java web应用性能分析之【基准测试】-CSDN博客 Java web应用性能分析之【sysbench基准测试】-CSDN博客 Java web应用性能分析之【CPU飙升分析概述】-CSDN博客 Java we…
阅读更多...
GPT学术优化推荐（gpt_academic ）

GPT学术优化推荐（gpt_academic ）

GPT学术优化 (GPT Academic):支持一键润色、一键中英互译、一键代码解释、chat分析报告生成、PDF论文全文翻译功能、互联网信息聚合GPT等等 ChatGPT/GLM提供图形交互界面&#xff0c;特别优化论文阅读/润色/写作体验&#xff0c;模块化设计&#xff0c;支持自定义快捷按钮&…
阅读更多...
014_用vim复制粘贴_保持双手正位

014_用vim复制粘贴_保持双手正位

[oeasy]python0014_用vim复制粘贴_保持双手正位 继续运行 &#x1f94a; 回忆上次内容 程序员 还是 很可爱的 要关心 身边的程序员 啊 毕竟是新时代的 典型新职业 文明 主流职业 血型 渔猎采集文明 猎人 O 游牧文明 牧民 B 农业文明 农民 A 工业文明 工人 商…
阅读更多...
最新文章

Copyright @ 2022~2023