CSS 基础

文章目录

    • CSS 常见的属性
    • CSS 常见样式
      • 行内样式
      • 内嵌样式
      • 导入样式
    • CSS 选择器
      • 标签选择器
      • id选择器
      • 类选择器
      • 全局选择器
      • 属性选择器
      • 组合选择器
    • CSS 常见应用
      • 表格
      • 列表
      • 导航栏
      • 下拉菜单
      • 提示工具
      • 图片廊

CSS (Cascading Style Sheets,层叠样式表),是一种用来为结构化文档(如 HTML 文档或 XML 应用)添加样式(字体、间距和颜色等)的计算机语言,CSS文件扩展名为 .css。CSS是用于控制网页样式并允许将样式信息和网页分离的一种标记语言。

该样式定义了如何显示 HTML 元素,通过使用 CSS 我们可以大大提升网页开发的工作效率!

CSS语法格式:CSS声明总是以分号 ; 结束,声明总以大括号 {}括起来:

标签名 
{属性名1:属性值1;属性名2:属性值2;属性名3:属性值3;...
}

选择器一般放在head的<style></style>元素中。

CSS 常见的属性

字体属性

  • font-family:设置字体类型,如font-size: “宋体”
  • font-size:设置字体大小,px 为像素,em 自动使用大小,方便放大缩小字体,一般使用em,1em=16px。
  • font-style:设置字体风格样式,normal 为正常,italic 为倾斜,oblique 也为倾斜。
  • font-weight:设置字体粗细,normal 为正常,bold 为加粗,lighter 为变细。

文本属性

  • text-decoration:对文本进行装饰,none 为正常,overline 为上滑线,underline 为下滑线,line-through 为删除线。
  • text-indent:文本缩进,中文一般为2em。
  • text-align:对齐方式,left 为左对齐,right 为右对齐,center 居中对齐,justify 两端对齐。
  • text-transform:大小写字母转换,uppercase 为大写,lowercase 为小写,capitalize 为首字母大写。
  • direction:文本方向,rtl 为右对齐,ltr 为左对齐,也是默认值。
  • color:文本颜色。
  • letter-spacing:设置字符间距,normal 为正常,还有如2px。
  • word-spacing:设置单词间距,normal 为正常,还有如30px。

尺寸属性

  • height:设置元素的高度,默认auto,还有如100px。
  • width:设置元素的宽度,默认auto,还有如100px。
  • line-height:设置行高,默认normal,还有如200%。

背景属性

  • background-color:设置元素背景色。
  • background-size:设置背景大小。
  • background-image:把图像设置为背景。
    • url(‘URL’) URL为图像地址。
    • linear-gradient() 渐变,如linear-gradient(blue, red)为垂直从上到下渐变,linear-gradient(to right, red , yellow) 为水平从左到右渐变,linear-gradient(to bottom right, red , yellow) 为从左上角到右下角渐变。
    • radial-gradient() 径向渐变,如radial-gradient(red, yellow, green)为椭圆渐变,radial-gradient(circle, red, yellow, green)为圆渐变。
  • background-position:设置背景的位置。
  • background-repeat:设置如何重复背景图像,默认repeat为水平和垂直方向重复,no-repeat不重复。
  • background-attachment:设置背景图像是否固定或者随着页面的其余部分滚动。默认scroll为随着页面的滚动而滚动,fixed 为不会随着页面的滚动而滚动,local 为随着元素内容的滚动而滚动。

CSS 常见样式

行内样式

只能用于当前标签。可以直接在标签中添加属性style。

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>行内样式</title>
</head>
<body>
<!--设置背景为红色,字体颜色为黑色,字体大小为20-->
<p style="background-color: red;color: black;font-size: 20px;">Python网络爬虫</p>
<!--设置字体颜色为蓝色,字体为italic形式-->
<p style="color: blue;font-style: italic;">Python网络爬虫</p>
</body>
</html>

内嵌样式

只能用于当前页面。内嵌样式就是在<head>标签中使用<style>标签,将所有css代码集中在一个区域中,实现了html和css代码分离,方便后期维护。

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>内嵌样式</title><style>body {background-color: yellow;}/*格式要求一样,可以合并写,逗号分割*/.test1,#test2 {color: red;font-size: 50px;text-align: center;}</style>
</head>
<body>
<div class="test1">Python网络爬虫</div>
<div id="test2">Python网络爬虫</div>
</body>
</html>

导入样式

可以同时作用于多个页面。

  1. 不用对每个页面写<style>标签,直接导入CSS文件即可,基本形式为:<link href=”css文件路径” type=”MIME类型” rel=”stylesheet”>

type 参数根据格式选择,如文本”text/css”,JS为“ext/javascript“,图片为”image/jpg“,所有图片为”image/*“。

创建一个css文件,如下1.css

body {background-color: yellow;
}/*格式要求一样,可以合并写,逗号分割*/
.test1, #test2 {color: red;font-size: 50px;text-align: center;
}

再创建html文件,导入css文件。

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>导入样式1</title><link href="1.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="test1">Python网络爬虫</div>
<div id="test2">Python网络爬虫</div>
</body>
</html>
  1. 需要写<style>标签,将css样式导入style中。
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>导入样式1</title><style>/*@import url('1.css');*/@import "1.css";</style>
</head>
<body>
<div class="test1">Python网络爬虫</div>
<div id="test2">Python网络爬虫</div>
</body>
</html>

CSS 选择器

标签选择器

p {color: red;text-align: center;
}

p 为标签选择器;color 是颜色属性,red为属性值;text-align是文本位置属性,center表示居中。

id选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>菜鸟教程(runoob.com)</title><style>#para1 {text-align: center;color: red;}</style>
</head><body>
<p id="para1">Hello World!</p>
<p>这个段落不受该样式的影响。</p>
</body>
</html>

在这里插入图片描述

ID属性不要以数字开头,数字开头的ID在浏览器中不起作用。

类选择器

class 选择器用于描述一组元素的样式,class 选择器有别于id选择器,class可以在多个元素中使用。class 选择器在 HTML 中以 class 属性表示, 在 CSS 中,类选择器以一个点 . 号显示。

.test1 {color: red;text-align: center;}

全局选择器

全局选择器顾名思义就是对所有标签做相同的修改,用*号显示。

* {color: green;text-align: center;}

属性选择器

属性选择器可以根据元素的属性及属性值来选择,两种方式,标签名[属性值]或标签名[属性名=属性值]。

p[class] {color: green;text-align: center;}p[class='test1'] {color: green;text-align: center;}

组合选择器

常见有四种组合方式的选择器。

  • 后代选择器(以空格 分隔)
  • 子元素选择器(以大于>号分隔)
  • 相邻兄弟选择器(以加号+分隔)
  • 普通兄弟选择器(以波浪号分隔)
div p
{background-color:yellow;
}div>p
{background-color:yellow;
}div+p
{background-color:yellow;
}div~p
{background-color:yellow;
}

CSS 常见应用

表格

新建一个tb.css文件,可设置如下表格样式:

/*表格边框,指定黑色边框*/
table, th, td {border: 1px solid black;
}/*表格宽度和高度,设置100%宽度,50像素的th元素的高度*/
table {width: 100%;
}th, td {height: 50px;
}/*表格文字对齐,水平对齐,垂直对齐*/
th, td {text-align: right;height: 50px;vertical-align: bottom;
}/*表格填充,控制边框和表格内容直接的间距*/
th {padding: 15px;
}/*表格颜色*/
table, th, td {border: 1px solid green;
}
th {background-color: green;color: white;
}

再将tb.css导入到html文件中

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>表格</title><style>@import "tb.css";</style>
</head>
<body>
<table><tr><th>Firstname</th><th>Lastname</th><th>Savings</th></tr><tr><td>Peter</td><td>Griffin</td><td>$100</td></tr><tr><td>Lois</td><td>Griffin</td><td>$150</td></tr><tr><td>Joe</td><td>Swanson</td><td>$300</td></tr><tr><td>Cleveland</td><td>Brown</td><td>$250</td></tr>
</table>
</body>
</html>

在这里插入图片描述

由示例可见,和之前html语法类似,只不过增加了一些css表格样式设置,页面整体看起来也更加美观。

列表

新建一个list.css文件,可设置如下列表样式:

/*圆形*/
ul.a {list-style-type: circle;
}
/*方形*/
ul.b {list-style-type: square;
}
/*罗马数字I、II*/
ol.c {list-style-type: upper-roman;
}
/*小写字母a、b*/
ol.d {list-style-type: lower-alpha;
}

再将list.css导入到html文件中

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Python学习路线</title><style>@import "list.css";</style>
</head><body>
<p>无序列表:</p>
<ul class="a"><li>Python基础知识</li><li>Python数据分析</li><li>Python网络爬虫</li>
</ul>
<ul class="b"><li>Python基础知识</li><li>Python数据分析</li><li>Python网络爬虫</li>
</ul><p>有序列表:</p>
<ol class="c"><li>Python基础知识</li><li>Python数据分析</li><li>Python网络爬虫</li>
</ol>
<ol class="d"><li>Python基础知识</li><li>Python数据分析</li><li>Python网络爬虫</li>
</ol>
</body>
</html>

在这里插入图片描述

导航栏

新建一个appbar.css文件,可设置如下样式:

/*固定导航条位置,头部对应top:0,尾部bottom:0*/
ul {list-style-type: none;margin: 0;padding: 0;overflow: hidden;background-color: #333;position: fixed;top: 0;width: 100%;
}
/*链接左对齐*/
li {float: left;
}
/*设置链接颜色及样式*/
li a {display: block;color: white;text-align: center;padding: 14px 16px;text-decoration: none;
}
/*鼠标移动到选项上修改背景颜色*/
li a:hover:not(.active) {background-color: #111;color: gray;
}/*激活当前导航条实例*/
.active {background-color: #4CAF50;
}

再将appbar.css导入到html文件中

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Skill</title><style>@import "appbar.css";</style>
</head>
<body>
<ul><li><a class="active" href="#Mysql">Mysql</a></li><li><a href="#Python">Python</a></li><li><a href="#Html">Html</a></li><li><a href="#Css">Css</a></li><li><a href="#Javascript">Javascript</a></li><li><a href="#Java">Java</a></li><li><a href="#C">C</a></li><li><a href="#C++">C++</a></li><li><a href="#Go">Go</a></li>
</ul>
<div style="padding:20px;margin-top:30px;background-color: red"><h1>&nbsp;</h1><h1>&nbsp;</h1><h1 style="text-align: center">No permission...</h1><h1>&nbsp;</h1><h1>&nbsp;</h1>
</div>
</body>
</html>

在这里插入图片描述

下拉菜单

这里将css格式内嵌到html文件中,示例如下:

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Skill</title><style>/*下拉按钮样式*/
.dropbtn {background-color: #4CAF50;color: white;padding: 16px;font-size: 16px;border: none;cursor: pointer;
}
/*容器<div> 需要定位下拉内容*/
.dropdown {position: relative;display: inline-block;
}
/*下拉内容(默认隐藏)*/
.dropdown-content {display: none;position: absolute;background-color: #f9f9f9;min-width: 160px;box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
/*下拉菜单的链接*/
.dropdown-content a {color: black;padding: 12px 16px;text-decoration: none;display: block;
}
/*当下拉内容显示后修改下拉按钮的背景颜色*/
.dropdown-content a:hover {background-color: #f1f1f1}
/*在鼠标移上去后显示下拉菜单*/
.dropdown:hover .dropdown-content {display: block;
}
/*当下拉内容显示后修改下拉按钮的背景颜色*/
.dropdown:hover .dropbtn {background-color: #3e8e41;
}</style>
</head>
<body>
<div class="dropdown"><button class="dropbtn">技能下拉选择</button><div class="dropdown-content"><a href="#Python">Python</a><a href="#Html">Html</a><a href="#Css">Css</a><a href="#Java">Java</a></div>
</div>
</body>
</html>

在这里插入图片描述

提示工具

应用示例如下

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>提示工具</title>
</head>
<style>/* Tooltip 容器*/.tooltip {position: relative;display: inline-block;border-bottom: 1px dotted black;}.tooltip .tooltiptext {visibility: hidden;width: 120px;background-color: black;color: #fff;text-align: center;border-radius: 6px;padding: 5px 0;position: absolute;z-index: 1;top: -5px;right: 110%;}.tooltip .tooltiptext::after {content: "";position: absolute;top: 50%;left: 100%;margin-top: -5px;border-width: 5px;border-style: solid;border-color: transparent transparent transparent black;}/*鼠标移动上去后显示提示框*/.tooltip:hover .tooltiptext {visibility: visible;}
</style>
<body style="text-align:center;"><h2>左侧提示框/右侧箭头</h2><div class="tooltip">鼠标移动到我这<span class="tooltiptext">快来点我啊!</span>
</div></body>
</html>

图片廊

制作一个照片墙,鼠标移动到照片时会放大。

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>照片墙</title>
</head>
<style>#box {width: 80%;background-color: orange;/*内容居中显示*/margin: 0 auto;}#box > img {width: 200px;height: 250px;margin: 30px;/*设置旋转的起点*/transform-origin: center;/*设置过度时间*/transition-duration: 2s;transition-property: all;}#box > img:nth-child(1){transform: rotate(20deg);}#box > img:nth-child(1){transform: rotate(20deg);}#box > img:nth-child(2){transform: rotate(-20deg);}#box > img:nth-child(3){transform: rotate(20deg);}#box > img:nth-child(4){transform: rotate(-20deg);}#box > img:nth-child(5){transform: rotate(20deg);}#box > img:nth-child(6){transform: rotate(-20deg);}#box > img:nth-child(7){transform: rotate(20deg);}#box > img:nth-child(8){transform: rotate(-20deg);}#box > img:hover{transform:rotate(30deg) scale(1.5);border: 1px solid #777;}
</style>
<body><div id="box"><img src="下午 趴在桌子的女孩4k动漫壁纸3840x216020.jpg"><img src="冬季雪地汉服美女4k壁纸3840x216018.jpg"><img src="动漫美女 鲜花 帽子 唯美 好看 4K壁纸16.jpg"><img src="吞噬星空4K高清壁纸10.jpg"><img src="宁安如梦 白鹿 古装剧照 4k壁纸17.jpg"><img src="银河星空一个人风景4K壁纸16.jpg">
</div></body>
</html>

在这里插入图片描述

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

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

相关文章

3.qml 3D-Node类学习

Node类是在View3D 中的对象基础组件&#xff0c;用于表示3D空间中的对象&#xff0c;类似于Qt Quick 2D场景中的Item&#xff0c;介绍如下所示&#xff1a; 如上图可以看到&#xff0c;Node类的子类非常多&#xff0c;比如Model类(显示3D模型)、ParticleSystem3D粒子系统类、Li…

appium2.0.1安装完整教程+uiautomator2安装教程

第一步&#xff1a;根据官网命令安装appium&#xff08;Install Appium - Appium Documentation&#xff09; 注意npm前提是设置淘宝镜像&#xff1a; npm config set registry https://registry.npmmirror.com/ 会魔法的除外。。。 npm i --locationglobal appium或者 npm…

如何预防最新的.locked、.locked1勒索病毒感染您的计算机?

尊敬的读者&#xff1a; 近期&#xff0c;网络安全领域迎来一股新潮——.locked、.locked1勒索病毒的威胁&#xff0c;其先进的加密技术令人生畏。本文将深入剖析.locked、.locked1勒索病毒的阴谋&#xff0c;提供特色数据恢复策略&#xff0c;并揭示锁定恶劣行径的先锋预防手…

Web攻防07_文件上传基础_文件上传靶场upload-labs-docker

文章目录 项目安装安装docker进入项目目录&#xff1a;一键部署运行 靶场关卡1、前端JS验证如何判断是否为前端验证解法1&#xff1a;抓包解法2&#xff1a;禁用JS 2、.htaccess解法 3、MIME类型解法 4、文件头判断5、黑名单过滤-过滤不严-单次过滤为空格6、黑名单-过滤不严-系…

阿里云cdn设置相同的域名路径访问不同的oss目录

1.设置回源配置&#xff0c;添加回源URL改写 2.设置跨域&#xff0c;cdn的跨域优先oss 3.回源设置

SpringData自定义操作

一、JPQL和SQL 查询 package com.kuang.repositories;import com.kuang.pojo.Customer; import org.springframework.data.jpa.repository.Query; import org.springframework.data.repository.CrudRepository; import org.springframework.data.repository.PagingAndSortingR…

深度学习——第6章 浅层神经网络(NN)

第6章 浅层神经网络&#xff08;NN&#xff09; 目录 6.1 神经网络模型概述 6.2 神经网络正向传播 6.3 神经网络反向传播 6.4 W和b的初始化 6.5 总结 上一课主要介绍了一些神经网络必备的基础知识&#xff0c;包括Sigmoid激活函数、损失函数、梯度下降和计算图。这些知识对…

MX6ULL学习笔记(十二)Linux 自带的 LED 灯

前言 前面我们都是自己编写 LED 灯驱动&#xff0c;其实像 LED 灯这样非常基础的设备驱动&#xff0c;Linux 内 核已经集成了。Linux 内核的 LED 灯驱动采用 platform 框架&#xff0c;因此我们只需要按照要求在设备 树文件中添加相应的 LED 节点即可&#xff0c;本章我们就来学…

windows10 php8连接sql server

一、环境安装 文章目录 一、环境安装1.安装php拓展2.在 Windows 上安装PHP驱动程序3.在 Windows 上安装ODBC驱动 二、php连接sqlserver三、注意事项数据库相关设置相关语法sqlsrv_fetch_array 的示例&#xff1a;sqlsrv_fetch 的示例&#xff1a;echo 和 print_r 的不同 所用资…

【卡塔尔世界杯数据可视化与新闻展示】

卡塔尔世界杯数据可视化与新闻展示 前言数据获取与处理可视化页面搭建功能实现新闻信息显示详情查看登录注册评论信息管理 创新点结语 前言 随着卡塔尔世界杯的临近&#xff0c;对于足球爱好者来说&#xff0c;对比赛的数据分析和新闻报道将成为关注的焦点。本文将介绍如何使用…

论文阅读:PointCLIP V2: Prompting CLIP and GPT for Powerful3D Open-world Learning

https://arxiv.org/abs/2211.11682 0 Abstract 大规模的预训练模型在视觉和语言任务的开放世界中都表现出了良好的表现。然而&#xff0c;它们在三维点云上的传输能力仍然有限&#xff0c;仅局限于分类任务。在本文中&#xff0c;我们首先协作CLIP和GPT成为一个统一的3D开放世…

C++ 运算符重载

目录 前言 算术运算符重载 加号运算符 位运算符重载 左移运算符 自增自减运算符重载 前置自增运算符 后置自增运算符 赋值运算符重载 等号赋值运算符重 关系运算符重载 相等 不等 函数调用运算符重载 总结 前言 在C中&#xff0c;运算符重载是一种强大的特性…

jmeter,csv文件参数化+断言 实现一个接口的case

1、case 及其 测试数据 注意保存文件的编码格式 id,name,limit,status,address,start_time,assert_status,assert_message 100,小米100,1000,1,某某会展中心101,2023-8-20 14:20,200,add event success ,,,,,,10021,parameter error 100,小米102,1002,1,某某会展中心103,2023-…

Centos7部署SVN

文章目录 &#xff08;1&#xff09;SVN概述&#xff08;2&#xff09;SVN与Samba共享&#xff08;3&#xff09;安装SVN&#xff08;4&#xff09;SVN搭建实例&#xff08;5&#xff09;pc连接svn服务器&#xff08;6&#xff09;svn图标所代表含义 &#xff08;1&#xff09;…

ArrayList与LinkLIst

ArrayList 在Java中&#xff0c;ArrayList是java.util包中的一个类&#xff0c;它实现了List接口&#xff0c;是一个动态数组&#xff0c;可以根据需要自动增长或缩小。下面是ArrayList的一些基本特性以及其底层原理的简要讲解&#xff1a; ArrayList基本特性&#xff1a; 动…

听GPT 讲Rust源代码--src/tools(13)

File: rust/src/tools/rust-analyzer/crates/ide-diagnostics/src/handlers/incoherent_impl.rs 在Rust源代码中&#xff0c;路径为rust/src/tools/rust-analyzer/crates/ide-diagnostics/src/handlers/incoherent_impl.rs的文件是为了处理Rust代码中的不一致实现问题而存在的。…

生成小程序URLlink链接遇到的坑

这里写自定义目录标题 前端生成小程序URL link背景用户打开小程序的常用方法短链接短链接优缺点优点缺点 生成短链接步骤 可能会遇到的问题&#xff1a;其他 注意&#x1f4e2; 前端生成小程序URL link ![h5打开小程序](https://img-blog.csdnimg.cn/direct/a4cfe3ef6d184c6d9…

MQTT的奇妙之旅:探索RabbitMQ Web MQTT插件的威力【RabbitMQ 十一】

欢迎来到我的博客&#xff0c;代码的世界里&#xff0c;每一行都是一个故事 MQTT的奇妙之旅&#xff1a;探索RabbitMQ Web MQTT插件的威力 前言第一&#xff1a;揭秘RabbitMQ Web MQTT插件背景和目的&#xff1a;MQTT 协议简介&#xff1a;WebSockets 和 MQTT 的融合&#xff1…

让高清媒体无限畅享——Movist Pro for Mac推广文章

随着科技的迅猛发展&#xff0c;高清媒体已经成为我们日常生活中不可或缺的一部分。无论是观看电影、追剧、还是欣赏高清音乐视频&#xff0c;我们都希望能够获得最佳的视听体验。为了满足这一需求&#xff0c;我们向大家推荐一款强大的高清媒体播放器——Movist Pro for Mac。…

Selenium安装WebDriver:ChromeDriver与谷歌浏览器版本快速匹配_最新版120

最近在使用通过selenium操作Chrome浏览器时&#xff0c;安装中遇到了Chrome版本与浏览器驱动不匹配的的问题&#xff0c;在此记录安装下过程&#xff0c;如何快速找到与谷歌浏览器相匹配的ChromeDriver驱动版本。 1. 确定Chrome版本 我们首先确定自己的Chrome版本 Chrome设置…