css引入

简介: 最近使用eclipse写前端,反正都是编译软件,用哪个不是用css的三种引入方式:1、行内式引入,使用style属性在特定的HTML标记内插入CSS代码,语法“<标签名 style="css样式">..</标签名>”;2、嵌入式引入,在文档head部分的style标签对中放入CSS代码,语法“<style>样式</style>”;3、外部引入,将CSS代码放入外部CSS文件中,使用link标签或“@import”规则引入html文档中。

最近使用eclipse写前端,反正都是编译软件,用哪个不是用


css的三种引入方式:1、行内式引入,使用style属性在特定的HTML标记内插入CSS代码,语法“<标签名 style="css样式">..</标签名>”;2、嵌入式引入,在文档head部分的style标签对中放入CSS代码,语法“<style>样式</style>”;3、外部引入,将CSS代码放入外部CSS文件中,使用link标签或“@import”规则引入html文档中。


一、css的属性

属性:属性是指定选择符所具有的属性,它是css的核心,css2共有150多个属性
属性值:属性值包括法定属性值及常见的数值加单位,如25px,或颜色值等。

二、css的行块属性


属性:div,p,ul,ol,li,h1-h6等

特点:1.可以设置宽高

2.不可以与别人共处一行

3.不设置宽度的情况下,宽度为100%

行内属性:span,a

特点:1.不可以设置宽,高

2.可以与别人共处一行

3.其宽高由内容撑开

行块内属性:img,input

特点:1.可以设置宽高

2.可以与别人共处一行


三、边框属性

border:边框宽度 边框风格 边框颜色;
    例如:border:5px solid #ff0000
边框:border,网页中很多修饰性线条都是由边框来实现的。
边框宽度:border-width:
边框颜色:border-color:
边框样式:border-style:solid(实线)/dashed(虚线)dotted(点划线)double(双线)可单独设置一方向边框,
可单独设置一方向边框,
    border-bottom:边框宽度 边框风格 边框颜色;底边框
    border-left:边框宽度 边框风格 边框颜色;左边框
    border-right:边框宽度 边框风格 边框颜色;右边框
    border-top:边框宽度 边框风格 边框颜色;上边框
四、css属性继承


不可继承的:display、margin、border、padding、background、height、min-height、max- height、、min-width、max-width、overflow、position、left、right、top、 bottom、z-index、float、clear、table-layout、vertical-align
所有元素可继承:visibility和cursor。
内联元素可继承:letter-spacing、word-spacing、line-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、text- decoration、text-transform。
块状元素可继承:text-indent和text-align
列表元素可继承:list-style、list-style-type、list-style-position、list-style-image。
表格元素可继承:border-collapse。


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <style type="text/css">
        div{width: 800px;height: 800px;
            background-color: rgb(0,, 0, 0);
            background-image: url(http://wx1.sinaimg.cn/bmiddle/c3335c0ely1grk8lon9fmg20d404kdhj.gif);
        background-repeat: no-repeat/*取消图像的重复平铺。-y-no-repeat:竖着不平铺。-x:横着不平铺 */;
        background-size: 100% 100%;
        display: inline-block;
        }
        span{
            width: 300px;height: 30px;
        }
    </style>
</head>
<body>
<div>我是div</div>


<div>我是div</div>
<span>我是span</span>
<span>我是span</span>
<input type="" name=""><!--默认text-->
<input type="" name="">
块属性:div,p,ul,ol,li,h1-h6等 
特点:1.可以设置宽高
2.不可以与别人共处一行
3.不设置宽度的情况下,宽度为100%
行内属性:span,a
特点:1.不可以设置宽,高
2.可以与别人共处一行
3.其宽高由内容撑开
行块内属性:img,input
特点:1.可以设置宽高
2.可以与别人共处一行
</body>
相关文章
|
API
免费节假日api接口使用教程-聚合数据
免费节假日api接口使用教程-聚合数据
4699 0
免费节假日api接口使用教程-聚合数据
|
10月前
|
人工智能 自然语言处理 API
AppFlow:无代码部署Dify成为公众号客服
本文介绍如何通过计算巢AppFlow无代码部署Dify应用,并将其配置到微信公众号中作为智能客服使用。具体步骤包括:访问计算巢AppFlow模板中心选择Dify实例模版,创建连接流并配置Dify和微信公众号的鉴权凭证,完成部署后发布连接流。最终,您可以通过微信公众号发送消息,接收AI智能客服的回复。
1546 9
AppFlow:无代码部署Dify成为公众号客服
|
人工智能 算法 安全
什么是数字分身
什么是数字分身
1354 3
|
计算机视觉 网络架构
【YOLOv8改进 - 卷积Conv】DWRSeg:扩张式残差分割网络,提高特征提取效率和多尺度信息获取能力,助力小目标检测
YOLO目标检测专栏探讨了YOLO的创新改进,如多尺度特征提取的DWRSeg网络。该网络通过区域残差化和语义残差化提升效率,使用DWR和SIR模块优化高层和低层特征。DWRSeg在Cityscapes和CamVid数据集上表现优秀,速度与准确性兼备。论文和代码已公开。核心代码展示了一个包含DWR模块的卷积层。更多配置详情见相关链接。
|
安全 Java Spring
Spring Boot 关闭 Actuator ,满足安全工具扫描
Spring Boot 关闭 Actuator ,满足安全工具扫描
1967 0
|
Java 开发者 微服务
Spring Cloud原理详解
【5月更文挑战第4天】Spring Cloud是Spring生态系统中的微服务框架,包含配置管理、服务发现、断路器、API网关等工具,简化分布式系统开发。核心组件如Eureka(服务发现)、Config Server(配置中心)、Ribbon(负载均衡)、Hystrix(断路器)、Zuul(API网关)等。本文讨论了Spring Cloud的基本概念、核心组件、常见问题及解决策略,并提供代码示例,帮助开发者更好地理解和实践微服务架构。此外,还涵盖了服务通信方式、安全性、性能优化、自动化部署、服务网格和无服务器架构的融合等话题,揭示了微服务架构的未来趋势。
381 6
|
消息中间件 数据可视化 RocketMQ
docker 安装 rocketmq可视化插件
docker 安装 rocketmq可视化插件
500 0
|
存储 缓存 资源调度
Monorepo,大型前端项目管理模式实践
阅读本文您将了解到:什么是 monorepo、为什么要 monorepo、如何实践 monorepo。
8544 50
Monorepo,大型前端项目管理模式实践
|
Java 索引 Spring
Java Jar包压缩、解压使用指南
image 什么是jar包 JAR(Java Archive)是Java的归档文件,它是一种与平台无关的文件格式,它允许将许多文件组合成一个压缩文件。
6269 0