CSS语言笔记

Cascading Style Sheets(级联样式表)

CSS是一种样式表语言，用于HTML文档的控制外观，定义布局。

HTML与CSS关系：
HTML是网页内容
CSS是网页样式
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>.p1{color: red;font-size: 24px;font-family: 楷体;background-color: aquamarine;}</style></head><body><!--css为html标签修饰外观--><!--a href=""><font color="red"><b>百度</b></font></a>--><!--a href="" style="color: red;font-size: 20px">百度</a--><a href="" class="p1">百度</a><a href="" class="p1">搜狐</a><a href="" class="p1">新浪</a><br /><a class="p1">QQ浏览器</a></body>
</html>
选择器优先级
<head><meta charset="utf-8" /><title></title>
<style>/*css注释内嵌样式表*/.t1{color: blue;}/*类选择器*/a{color: blue;}p{color: red;}/*通配选择器*/*{font-size: 15px;}/*id选择器 唯一的*/#aid{color: chocolate;}/*选择器优先级匹配标签越多，优先级越低，重叠选中标签时，使用优先级高的样式，但低优先级与高优先级没有重叠的样式也会添加上去*/</style>
</head><body><!-- 行内样式表，只对所在标签进行修饰，优先级最大。行内样式表>aid选择器>类选择器>标签选择器>通配选择器.--><a href="" style="color: black;font-size: 20px;font-family: 楷体;" class="t1" >腾讯</a><a href="" id="aid">新浪</a><a href="" >微博</a><p>段落1</p><p>段落2</p></body>
</html>

css里的部分文本

<html><head><meta charset="utf-8"><title></title><style>.p1{color: #C6EB94;font: size 20px;/* px是像素单位，css中的尺寸需要加单位*/font-family: 楷体;font-weight: 700;/*加粗*//*text-align: center;  文字水平对齐*/font-style: italic;/*斜体文本*//* text-decoration: underline;  修饰文本下添加下划线*//*text-decoration: line-through; 修饰文本  添加删除线*//*line-height: 50px;控制行高*//*letter-spacing: 20px;控制字符单词间距*//*word-spacing: 20px;控制英文单词间距*/text-indent: 2em;/*text-indent: 2em; em当前文本中一个字符的大小的像素*/}a{text-decoration: none;}/*控制字符被鼠标指示后的浮动变化。*/a:hover{text-decoration: underline;color: #C6EB94;}	</style></head><body><p class="p1">列表属性可以放置，改变列表项标志，或者将图标作为列表项标志。列表属性可以放置，改变列表项标志，或者将图标作为列表项标志。列表属性可以放置，改变列表项标志，或者将图标作为列表项标志。</p><a herf="">百度1</a><a herf="">百度2</a><a herf="">百度3</a><a herf="">百度4</a></body>
</html>
段落背景和列表
1.段落背景：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>p{background-color: aqua;width: 900px;height: 900px;background-image: url(img/rw.png) ;/*添加背景图片*/background-repeat:no-repeat;/*背景不重复*/background-position: center ;/* 背景位置 水平（left center right ）垂直（top  bottom  ） */}</style></head><body><p>段落标签</p></body>
</html>
2.列表：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>/*后代选择器 对某个父类标签下的子类进行修饰*/.u1 li{color: aqua;list-style-type: none;/*控制列表前的排序标志符号*/list-style-image: url(img/rw1.png);/*在列表前的标志改为图标*/list-style-position: inside;/*图标位置  是在列表里面还是列表外面（inside  outside）*//*list-style: none outside url(img/rw1.png);  对列表项一种简写的修饰方式*/}</style></head><body><ul class="u1"><li>列表项</li><li>列表项</li><li>列表项</li><li>列表项</li></ul><ul class="u2"><li>列表项</li><li>列表项</li><li>列表项</li><li>列表项</li></ul></body>
</html>

css伪类和图片透明度：

鼠标移入移出标签以及相应操作时，标签发生特殊变化。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>a{color: aqua;}/*当鼠标移动到选择器对应的标签时，自动切换到此样式表*/a:hover{color: red;font-size: 20px;}/*当鼠标点击选择器对应的标签时，自动切换到此样式表*/a:active{color: blue;}p:hover{color: red;background-color: aqua;}p:active{color: blue;}.both:hover{background-color: blue;}.both:active{background-color: crimson;}/*当拥有输入功能的标签，获得鼠标焦点时，自动切换到此样表达式*/input:focus{background-color: aquamarine;}img{opacity: 0.5;}img:hover{opacity: 1;/*图片透明度范围为0-1.0*/}</style></head><a href="">百度</a><p>段落</p><input type="button" value="保存" class="both"/><br /><input /><br /><input /><br /><input /><br /><input /><br /><img src="img/rw.png"/></body>
</html>

块级，行级，行级块标签

1.块级标签：无论内容多少 都会独自占据一行的。

2.行级标签：只占自身大小的标签，不会占一行。

3.行级块标签：不占一行，又可以设置宽高.

div和span:

块级标签和行级标签中的两个纯净标签；

1.块级:div.

2.行级:span.

display:

可以修饰标签的类型

1.block：改为块级标签

2.inline：改为行级标签

3.inline-block：改为行级块标签

4.none：改为空标签

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><!-- 块级标签:可以设置宽高,主要用来进行网页的布局.例如 p  h1-h6其中div是一个纯洁的块级标签,没有任何附加样式，我们给它设置什么样式，它变为什么样式。--><!--display:特定条件下可以修饰标签的类型.1.block：改为块级标签2.inline：改为行级标签	3.inline-block：改为行级块标签		4.none：改为空标签--><p style="background-color: chartreuse; ">aaa</p>ppp<h1 style="display: inline;">bbb</h1><div style="background-color: chartreuse; width: 200px;height: 200px; display: inline-block;">div是一个纯洁的块级标签</div><!--行级标签:只占内容的大小，不会占一行，设置宽高也无效，例如a b  s i主要用来对网页上的文字进行修饰。span是一个纯洁的行级标签，对网页上的文字进行选中，修饰。--><a href="" style="width: 100px;height: 100px;">cccc</a><s style="display:block;">BBBB</s><span style="color: red; text-decoration: underline;">DDDD</span><!--常用标签  div   span   a    表格    表单     列表--><!--行级块标签：不占一行，又可以设置宽高--><img src="img/rw.png" width="50" height="50"/><br /><input style="width:50px ; height:10px;"/></body>
</html>

盒子模型：

盒子模型，每个标签都想一个盒子，网页布局其本质就是摆放盒子。 ​ 每个盒子分为了4个区域： ​ 内容区：放内容的区域， ​ 内边距：内容区到外边的距离， ​ 边框：标签的最外层， ​ 外边距：一个标签距离另一个标签之间的距离。

标签大小：内容区+内边距+外边距的大小。

设置内容区和内边距：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>.box{background-color: aqua;/*width和height仅仅只是设置内容区的大小，不是标签的大小标签大小是内容区大小+内边距+外边距的大小。*/width: 100px;height: 100px;/* 设置内边距  padding- /padding  *//*padding:10px;*//*简化padding: 5px 10px 15px 20px;   上  右  下  左padding:10px 20px;  上下  左右  */}.box1{width: 65px;height: 25px;padding: 10px 25px;background-color: greenyellow;}.box2{width:270px;height: 70px;padding: 15px 65px;background-color: red;}</style></head><body><!--盒子模型，每个标签都想一个盒子，网页布局其本质就是摆放盒子。每个盒子分为了4个区域：内容区：放内容的区域，内边距：内容区到外边的距离，边框：标签的最外层，外边距：一个标签距离另一个标签之间的距离。--><div class="box">A</div><div class="box1">新闻热点</div><div class="box2"><img src="img/ffyc.png"  style="display: block;"/>   </div></body>
</html>
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>*{/*去掉所有标签默认的外边距和内边距。*/margin: 0px;padding: 0px;}/*body{margin: 0px;默认会有8px的外边距，此处去除body标签默认外边距。}*/.box{background-color:aqua;width: 180px;height: 180px;margin-top: auto;}.box1{background-color:red;width: 180px;height: 180px;/*margin设置外边距。margin-top: 10px;margin-left: 10px;*/margin: 10px;}.box2{background-color:greenyellow;width: 180px;height: 180px;/*auto设置距离为自动最大左右都为auto时，标签只有居中，才会左右都最大。上下的外边距不能设置为自动，设置自动时为0，*/margin-left: auto;margin-right: auto;margin-top: 10px;margin-bottom: 10px;}	</style></head><body><div class="box">盒子模型</div><div class="box1">盒子模型1</div><div class="box2">盒子模型2</div></body>
</html>

文档流

文档中的标签在排列时所占用的位置。 将窗体自上而下分成一行行 ，并在每行中按从左至右的顺序排放标签，即为文档流。

网页布局就是打破默认的文档流。

浮动：

浮动会使标签脱离原来的文档流（默认的二维平面），悬浮起来。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>.nav{background-color: greenyellow;padding: 10px 30px;float: left;}</style></head><body><!--浮动：浮动会使标签脱离原来的文档流（默认的二维平面），悬浮起来。float:left/right/none;浮动后的标签不会占用原来文档流中的位置，下面的标签就会上移，跑到浮动标签的下面，影响后面网页的布局。--><div class="nav">新闻首页</div><div class="nav">体育新闻</div><div class="nav">科技前沿</div><div class="nav">娱乐快报</div><div style="clear: left;"></div><!--清除浮动--><div>abcd</div></body>
</html>
定位

定位的基本思想很简单，它允许你定义的标签相对于其正常位置，或者相对于父标签、另一个标签甚至浏览器窗口本身而出现的位置。

1.相对定位：

相对定位是一个非常容易掌握的概念. 相对于它的起点进行移动，移动后原来的位置还被占用。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>.box1{background-color: red;width: 100px;height: 100px;position: relative;/*开启相对定位，以自己为参照物，不脱离原来的文档流*/left: 100px;}.box2{background-color: blue;width: 100px;height: 100px;}</style></head><body><div class="box1">div1</div><div class="box2">div2</div></body>
</html>
2.绝对定位：

移动时的参照物：离他最近的 开启了定位的父级标签，如果所有父级标签都没开启定位，那么它以浏览器的边框为参照物。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>.box1{background-color: red;width: 100px;height: 100px;position: absolute;/*开启绝对定位，立即脱离原来的文档流*/left:100px;top: 100px;/*移动时的参照物：离他最近的 开启了定位的父级标签，如果所有父级标签都没开启定位，那么它以浏览器的边框为参照物。一般情况下开启另一个标签的绝对定位，父类一般开启相对定位。*/}.box2{background-color: blue;width: 100px;height: 100px;}.main{background-color: antiquewhite;width: 200px;height: 200px;position: relative;}</style></head><body><div class="main">div3<div class="box1">div1</div></div><div class="box2">div2</div></body>
</html>

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

万事开头难——Java实现俄罗斯小方块【第一步】

万事开头难——Java实现俄罗斯小方块【第一步】

目录 技术实现&#xff1a; 1.初始化游戏窗口&#xff1b; 1.1 什么是窗口&#xff1a; 1.2 Swing 1.3 JFrame创建窗口&#xff1a; 1.3.1创建窗口的逻辑 1.3.2.设置简单的页面 1.3.3.优化 1.3.4.设置标题 1.4 创建游戏窗口 技术实现&#xff1a; 1.初始化游戏窗口&am…
阅读更多...
基于android开发平台的聊天软件实现(论文+源码)_kaic

基于android开发平台的聊天软件实现(论文+源码)_kaic

摘要&#xff1a;互联网时代的到来使得手机通讯变得更为普及和强大&#xff0c;人们可以随时随地地进行交流。由于工作的繁忙以及生活节奏的加快&#xff0c;人们无法有更多时间展开面对面的交谈&#xff0c;导致在线聊天软件的使用更加频繁&#xff0c;所以本文尝试设计了一款…
阅读更多...
Node入门以及express创建项目

Node入门以及express创建项目

前言 记录学习NodeJS 一、NodeJS是什么&#xff1f; Node.js 是一个开源和跨平台的 JavaScript 运行时环境 二、下载NodeJs 1.下载地址(一直点击next即可&#xff0c;记得修改安装地址) https://nodejs.p2hp.com/download/ 2.查看是否安装成功&#xff0c;打开命令行 nod…
阅读更多...
css入门宝典

css入门宝典

3.1.4 通配符选择器 语法 : *{} 作用 : 让页面中所有的标签执行该样式,通常用来清除间距 例子 : *{ margin: 0; //外间距 padding: 0; //内间距 } 一 CSS基本语法 1基础知识 1.1概述 Css (层叠样式表)是种格式化网页的标准方式&#xff0c; 用于控制设置网页的样式&#xff…
阅读更多...
【INTEL（ALTERA）】编程了错误的加密密钥后，为什么 Agilex™ 7 设备无法恢复？

【INTEL（ALTERA）】编程了错误的加密密钥后，为什么 Agilex™ 7 设备无法恢复？

目录 说明 解决方法 说明 如果您意外地对加密密钥编程错误&#xff0c;Agilex™ 7 设备将无法恢复。这是此设备的预期行为。 解决方法 此错误没有恢复流程。使用 Agilex™ 7 设计安全功能时&#xff0c;请注意加密密钥并仔细编程。
阅读更多...
windows系统，家庭自用NAS。本地局域网 Docker安装nextcloud

windows系统，家庭自用NAS。本地局域网 Docker安装nextcloud

windows系统&#xff0c;家庭自用NAS。本地局域网 Docker安装nextcloud 1、docker安装 太简单了&#xff0c;直接去搜一搜。 docker-compose 相关命令 docker-compose down docker compose up -d2、还是使用老的 在你需要挂载的目录下&#xff0c;新建一个文件&#xff0c;…
阅读更多...
Linux在创建用户的时候遇到的错误：useradd: Permission denied.useradd：无法锁定 /etc/passwd，请稍后再试。

Linux在创建用户的时候遇到的错误：useradd: Permission denied.useradd：无法锁定 /etc/passwd，请稍后再试。

针对以下这个问题主要时权限问题 1.当我们输入useradd (创建的用户名&#xff0c;一般用英文) -m -s /bin/bash命令创建用户时&#xff0c;不是root用用户就会报错 [yllocalhost /]$ useradd hsyl -m -s /bin/bash useradd: Permission denied. useradd&#xff1a;无法锁定 …
阅读更多...
POC EXP | woodpecker插件编写

POC EXP | woodpecker插件编写

woodpecker插件编写 目录 woodpecker介绍woodpecker使用插件编写 安装环境 woodpecker-sdkwoodpecker-request 创建Maven项目 Confluence OGNL表达式注入漏洞插件编写 创建Package包和Class类编写POC 漏洞POC代码编写导出jar包将jar包放入woodpecker的plugin目录运行woodpeck…
阅读更多...
使用Python进行数据分析与可视化

使用Python进行数据分析与可视化

使用Python进行数据分析与可视化 数据分析与可视化是数据科学的重要组成部分，Python凭借其丰富的库和简洁的语法成为数据分析的主流语言。本文将介绍如何使用Python进行数据分析与可视化，重点讲解Pandas、NumPy、Matplotlib和Seaborn这四个主要库的使用。 目录 数据分析与可…
阅读更多...
ES6-04-模块化的暴露：export关键字

ES6-04-模块化的暴露：export关键字

一、export关键字 在ES6中&#xff0c;模块化的暴露主要通过export关键字来实现。根据暴露方式的不同&#xff0c;可以将其分为以下几种类型&#xff1a; 1-1、分别暴露&#xff1a; 每个export都暴露各自的方法或者变量。 // test.js export let a 100; export funct…
阅读更多...
一个简洁、优雅且高效的字符串首字母转大写函数

一个简洁、优雅且高效的字符串首字母转大写函数

在go语言的开发中&#xff0c;字符串首字母转大写是一个非常常用的功能。今天给大家分享的是一个优雅、精简且高效的字符串首字母转大写函数。 首字母转大写函数 // 将字符串首字母转换为大写 // author tekintian <tekintiangmail.com> func UcFirst(s string) string …
阅读更多...
springCloudAlibaba之分布式网关组件---gateway

springCloudAlibaba之分布式网关组件---gateway

gateway-网关 网关spring cloud gateway 网关 在微服务架构中一个系统会被拆分成多个微服务。那么作为客户端(前端)要如何去调用这么多的微服务&#xff1f;如果没有网关的存在&#xff0c;我们只能在客户端记录每个微服务的地址&#xff0c;然后分别去用。 这样的架构&#x…
阅读更多...
【文档智能】实践：基于Yolo三行代码极简的训练一个版式分析模型

【文档智能】实践：基于Yolo三行代码极简的训练一个版式分析模型

一、数据集 本文以开源的CDLA数据集做为实验&#xff0c;CDLA是一个中文文档版面分析数据集&#xff0c;面向中文文献类&#xff08;论文&#xff09;场景。包含以下10个label&#xff1a; 数据集下载地址&#xff1a;https://github.com/buptlihang/CDLA 数据集是labelme格式…
阅读更多...
「茶桁 AI 秘籍-CV 篇」预告

「茶桁 AI 秘籍-CV 篇」预告

Hi, 大家好。 我是茶桁。 咱们的《茶桁的 AI 秘籍》系列距离上一个系列课程《人工智能 BI 核心》已经有一段时间了&#xff0c;终于有时间可以写 CV 部分的课程&#xff0c;主要也是最近一段时间我确实有点忙不过来。 那么咱们 CV 的课程会有一些变化&#xff0c;就是会改为收…
阅读更多...
MySQL + Keepalived自动切换

MySQL + Keepalived自动切换

目录 一. 环境准备 二. 部署软件 三. master主机配置keepalived 四. slave主机配置keepalived 五. 两台机器配置数据库检查脚本 六. 客户端模拟访问 一. 环境准备 准备三个新环境的虚拟机&#xff0c;关闭防火墙和SElinux安全策略&#xff0c;并设置时间同步和配置好YUM…
阅读更多...
搭建k8s集群报错unknown command “\u00a0“ for “kubeadm init“

搭建k8s集群报错unknown command “\u00a0“ for “kubeadm init“

搭建k8s报错unknown command “\u00a0” for “kubeadm init” 网上搜了一下&#xff0c;是因为复制过来的命令前面包含了空格&#xff0c;将复制的命令放到idea可以清楚看到几个命令前面有空格&#xff0c;删除掉就好了&#xff0c;记录一下
阅读更多...
低压电工作业题库

低压电工作业题库

1.螺口灯头的螺纹应与&#xff08; &#xff09;相接。 A.零线 B.相线 C.地线 答案:A 2.指针式万用表测量电阻时标度尺最右侧是&#xff08; &#xff09;。 A.∞ B.0 C.不确定 答案:B 3.继电器是一种根据&#xff08; &#xff09;来控制电路"接通"或&quo…
阅读更多...
Github入门教程，适合新手学习（非常详细）

Github入门教程，适合新手学习（非常详细）

前言&#xff1a;本篇博客为手把手教学的 Github 代码管理教程&#xff0c;属于新手入门级别的难度。教程简单易操作&#xff0c;能够基本满足读者朋友日常项目寄托于 Github 平台上进行代码管理的需求。Git 与 Github 是一名合格程序员 coder 必定会接触到的工具与平台&#x…
阅读更多...
React+TS前台项目实战（六）-- 全局常用组件Button封装

React+TS前台项目实战（六）-- 全局常用组件Button封装

文章目录 前言Button组件1. 功能分析2. 代码注释说明3. 使用方式4. 效果展示&#xff08;1&#xff09;有加载动画&#xff0c;执行promise函数&#xff08;2&#xff09;无加载动画&#xff0c;执行click事件 总结 前言 今天这篇主要讲全局按钮组件封装&#xff0c;可根据UI设…
阅读更多...
2023年13个最适合销售电子书的WordPress主题

2023年13个最适合销售电子书的WordPress主题

欢迎来到我们用于销售电子书和其他数字/可下载产品&#xff08;软件、应用程序、图标集、主题等&#xff09;的最佳WordPress主题的完整集合。 这些主题有内置的支付网关&#xff0c;可以通过 PayPal、信用卡等处理安全支付。&#xff08;易于配置&#xff01;&#xff09; 最…
阅读更多...
最新文章

Copyright @ 2022~2023