css

最新推荐文章于 2022-05-14 16:15:00 发布
最新推荐文章于 2022-05-14 16:15:00 发布
阅读量192 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40439977/article/details/78940021
版权
css：层叠样式表，可以将网页的内容的样式能拆开，那么html中的大部分表现样式的标签就废了，
html只负责文档的结构和内容，表现形式就完全交给css。
1. css的定义方法：
选择器 {属性：值；属性：值；属性：值；}
选择器是将样式表和页面元素关联起来的名称，属性是希望设置的样式属性，每一个属性有
一个或者多个值。
div{ width:100px; height:100px; background:gold; }
2. css引入的方式：
内联式：通过标签的style属性，在标签上直接写样式。
<div style="width:100px; height:100px; background:red ">......</div>
嵌入式：通过style标签，在网页上创建嵌入式的样式表。
<style type="text/css"> div{ width:100px; height:100px; background:red } ......</style>
3. 外链式：通过link标签，链接外部样式文件到页面中。
<link rel = "stylesheet" type=text/css" href="css/main.css">

css常用的选择器:
1.标签选择器：此种选择器影响范围大，一般用来做一些通用设置，活在层次选择器中。
div{color:red} ......<div>这是第一个div</div> <!-- 对应以上样式 --><div>这是第二个div</div> <!-- 对应以上样式 -->
2. 类选择器：通过类名来选择元素，一个类可用在多个元素，一个元素也可使用多个类，应用灵
活。也是css中应用最多的一种选择器。
.blue{color:blue}.big{font-size:20px}.box{width:100px;height:100px;background:gold} ......<div class="blue">....</div><h3 class="blue big box">....</h3><p class="blue box">....</p>
3. 层次选择器：主要应用在标签嵌套的结构中，层次选择器，是结合上面的两种选择器来写
的选择器，它可以与标签选择器结合进行使用，减少命名，同时也可以通过层级，限制样式
的作用范围。
.con{width:300px;height:80px;background:green}.con span{color:red}.con .pink{color:pink}.con .gold{color:gold}<div class="con"> <span>....</span> <a href="#" class="pink">....</a> <a href="#" class="gold">...</a></div><span>....</span><a href="#" class="pink">....</a>
例子：
<head>
<style>
.con{
color:blue;
background:dark;}
.con more{
width:100px;
font-size:100px;}
调用:
<div class="con">
<more>
luobingting
</more>
</div>

css属性入门：
布局常用样式属性：
width : 设置元素的宽度：width: 100px ;
  • height 设置元素(标签)的高度，如：height:200px;
  • background 设置元素背景色或者背景图片，如：background:gold; 设置元素背景色为金色
  • 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;
  • padding 设置元素包含的内容和元素边框的距离，也叫内边距，如padding:20px;padding是同时设置4个边的，也可以像border一样拆分成分别设置四个边:padding-top、padding-left、padding-right、padding-bottom。
  • margin 设置元素和外界的距离，也叫外边距，如margin:20px;margin是同时设置4个边的，也可以像border一样拆分成分别设置四个边:margin-top、margin-left、margin-right、margin-bottom。
  • float 设置元素浮动，浮动可以让块元素排列在一行，浮动分为左浮动：float:left; 右浮动：float:right;
文本常用样式属性一：
  • 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; 将文字下划线去掉

罗小样
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css投影
weixin_41824429的博客
10-08 6683
css投影
CSS表格
m0_57774967的博客
04-24 5600
一、表格边框 指定css表格边框，使用border属性 下面例子指定一个表格的th和td元素的黑色边框 html代码： css代码： 浏览器呈现效果： 注意：在上面的例子中的表格有双边框，这是因为表和th/td元素有独立的边界，为了显示一个表的单个边框，使用border-collapse属性 二、折叠边框 border-collapse属性设置表格的边框是否被折叠成一个单一的边框或隔开 html代码： css代码： ...
CSS 阴影效果
热门推荐
Dominic_W的博客
05-14 3万+
CSS中，通过text-shadow、box-shadow两个属性分别为文本和元素添加阴影效果。 CSS语法 box-shadow: h-shadow v-shadow blur spread color inset; 向元素添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。 h-shadow: 必需。水平阴影的位置，可以为负值 v-shadow:必需。垂直阴影的位置，可以为负值 blur:可选，阴影模糊的
CSS
04-10
CSS
CSS重置
02-17
CSS重置 一个微小的默认CSS重置基于： 和 安装 NPM： npm install --save-dev css-reset 纱： yarn add css-reset 手动安装 首先，让我们克隆此存储库： git clone https://github.com/mlaurel/css-reset.git ...
bootstrap.min.css
02-23
用于渲染前端静态页面
CSS Tutorial
06-20
CSS Basic CSS HOME CSS Introduction CSS Syntax CSS Id & Class CSS How To CSS Styling Styling Backgrounds Styling Text Styling Fonts Styling Links Styling Lists Styling Tables CSS Box Model CSS Box ...
bootstrap.css
01-27
bootstrap的css文件
pi_heif-0.17.0-cp39-cp39-manylinux_2_31_armv7l.whl
最新发布
07-27
pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。
ubuntu20.04-ssh9.8p1-ssl3.0.14-focal-deb-amd64升级加固脚本.zip
07-27
若有新版本请查看文章最后附件地址：https://blog.csdn.net/liuxin638507/article/details/132450367 特点： 1、同时升级openssh与openssl，采用deb包形式，一键快速升级版本，无需每台单独再次进行编译， 2、隐藏openssh-版本号(openssh9.8p1及之后隐藏版本号还未找到方法) 3、已默认安全加固（已有配置跳过） 安装： 执行 bash upgrade_ssl_ssh_ubuntu.sh 进行安装 注意，升级安装后，确保sshd服务正常，请新开终端进行验证测试 验证 openssl版本： openssl version OpenSSL 3.0.14 4 Jun 2024 (Library: OpenSSL 3.0.14 4 Jun 2024) openssh版本： ssh -V OpenSSH_9.8p1, OpenSSL 3.0.14 4 Jun 2024
avif-0.5.0-cp36-cp36m-manylinux1_i686.whl
07-27
python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！
教务管理系统-毕业设计.zip
07-27
教务管理系统-毕业设计.zip
pillow_jxl_plugin-1.2.5-cp39-none-win_amd64.whl
07-27
基本介绍 名称与起源：Pillow，原名为PIL（Python Imaging Library），但PIL只支持Python 2版本。随着Python 3的普及，Pillow作为PIL的一个分支出现，兼容Python 3并提供更多的功能和改进。 主要功能：Pillow支持多种图像格式的打开、保存、显示以及基本的图像操作和处理，如裁剪、缩放、旋转、翻转、滤镜应用等。 跨平台性：Pillow库可以在不同的操作系统上运行，包括Windows、Linux和MacOS等。 主要功能模块 Pillow库包含多个功能模块，每个模块都提供了特定的图像处理功能。以下是一些常用的模块： Image：用于处理图像文件，提供打开、保存、调整大小、旋转、裁剪、滤镜等功能。 ImageDraw：提供在图像上绘制各种形状（如线条、矩形、圆形）和文本的功能。 ImageFont：用于加载和使用TrueType字体文件，以便在图像上绘制文本时设置字体样式、大小和颜色。 ImageFilter：提供各种滤镜效果，如模糊、锐化、边缘增强等，用于图像增强、特效处理和图像识别等应用。 ImageEnhance：用于调整图像的亮度、对比度、颜色饱和度等参数，使图像更加清晰、明亮或具有特定的调色效果。 高级功能 除了基本的图像处理功能外，Pillow还支持一些高级功能，如色彩空间转换、直方图均衡化等。这些功能可以帮助用户进行更复杂的图像处理和分析。
pi_heif-0.17.0-cp38-cp38-win_amd64.whl
07-27
pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。
[毕设]高效人事考勤管理系统.zip
07-27
[毕设]高效人事考勤管理系统
人力资源培训.HR如何与业务部门进行沟通.ppt
07-27
人力资源培训.HR如何与业务部门进行沟通.ppt
毕业设计：基于Springboot的健身俱乐部网站 PPT
07-27
随着社会发展，健身俱乐部的管理面临日益严峻的挑战。众多用户倾向于通过互联网获取信息，但健身相关信息繁杂且真伪难辨。为便于用户更有效地获取本健身俱乐部的管理信息，设计一个既安全又高效的官方网站显得尤为重要。 本文旨在打造一个安全、简洁的健身俱乐部网站，助力用户快速查找健身课程、健身器材、会员卡详情及新闻公告等信息，以解决当前健身俱乐部管理信息混乱、难以辨识的问题。该系统基于Spring Boot架构技术，运用Java编程语言与MySQL数据库进行开发设计。通过对健身俱乐部业务流程的深入分析，我们明确了其功能性和非功能性需求，并据此设计了包含个人用户、管理员和教练三大模块的健身俱乐部网站。 此系统不仅为用户提供了一个便捷实用的健身俱乐部在线平台，使他们能够迅速找到适合自己的健身俱乐部，还允许用户浏览健身课程和器材信息，并支持在线留言功能。同时，管理员可通过后台管理系统轻松管理用户和教练的信息，亦能发布在线留言，以便用户及时获取最新的健身课程信息。如此，用户便能安全、高效地获取健身俱乐部的管理信息。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值