CSS样式

最新推荐文章于 2024-03-08 14:14:04 发布
最新推荐文章于 2024-03-08 14:14:04 发布
阅读量131 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sxl1947842654/article/details/81020748
版权

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>CSS样式</title>

</head>

<!--

background-attachment:设置背景图片是否随内容滚动

属性值：

fixed    背景不滚动

scroll   背景随内容滚动

-->


<body style="background-image: url(img/456.jpeg);background-attachment:scroll;">

    <div style="text-decoration:underline">我是div</div>

    <div style="text-transform:uppercase;">我是div</div>

    <div style="text-transform:lowercase;">我是div</div>

    <div style="text-transform:capitalize;">我是div</div>

    

       <!--

font-variant:设置小型大写字母

属性值：

normal      正常效果

small-caps  小型大写字母

        -->

   

        <div style="font-variant:normal;">

hello

</div>

<div style="font-variant:small-caps;">

hello

</div>

    

        <!--

text-indent:首行缩进

属性值：

 -->

        

        <div style="text-indent: 2em;">

中午吃什么?史诗级难题.....

</div>

<div style="text-align: left;">

飞翔

</div>

<div style="text-align: center;">

屠天

</div>

<div style="text-align:center ;">

鲱鱼

</div>

    

<!--

line-height:设置行高

属性值：

px, em , rem ,百分比

-->

<div style="line-height: 30px;">

南水北调

</div>

<!--

letter-spacing:设置字距（设置字母之间的间距）

属性值：

px, em, rem ,百分比

-->

<div style="letter-spacing: 20px;">

我爱你，I Love you !

</div>

<!--

word-spacing:设置词距（设置单词之间的间距，以空格为单位来区分）

属性值：

px, em, rem ,百分比

-->

<div style="word-spacing: 20px;">

我爱你，I Love you!

</div>

<!--

字体设置

-->

<!--

font-family:设置字体类型

属性值:具体的字体类型

-->

<div style="font-family:STKaiti ;">

海阔凭鱼跃，天高任鸟飞！Good good study,Day day up!

</div>

<!--

font-size:设置字体大小

属性值：

px, em, rem ,百分比

-->

<div style="font-size:36px ;">

海阔凭鱼跃，天高任鸟飞！Good good study,Day day up!

</div>

<!--

font-weight:设置字体粗细

属性值：

lighter,normal(正常值)，bold, bolder

100,200,300,400,500,600,700,800,900

其中 400 相当于 normal，700 相当于bold

-->

<div style="font-weight: 900;">

海阔凭鱼跃，天高任鸟飞！Good good study,Day day up!

</div>

<!--

font-style:设置字体样式

属性值：

normal 正常字体

italic 斜体

obliqe 字体斜体

-->

<div style="font-style: oblique;">

海阔凭鱼跃，天高任鸟飞！Good good study,Day day up!

</div>

<div style="font-style: italic;">

海阔凭鱼跃，天高任鸟飞！Good good study,Day day up!

</div>

<!--

color :设置字体颜色

属性值：

颜色单词，十六进制颜色，rgb ,rgda

-->

<div style="color: aquamarine;">

海阔凭鱼跃，天高任鸟飞！Good good study,Day day up!

</div>

<div style="color: blanchedalmond;">

海阔凭鱼跃，天高任鸟飞！Good good study,Day day up!

</div>

<!--

background-color:设置背景颜色

属性值：

颜色单词，十六进制颜色，rgb ,rgda

-->

<div style="background-color:red ;width:300px;height: 300px;">

撸起袖子加油干！

</div>

<!--

background-image:设置背景图片

属性值:url(图片的路径)

-->

<div style="height: 300px;background-image:url(img/123.jpg) ;">

撸起袖子加油干！

</div>

<!--

background-repeat:设置背景图片是否平铺

属性值:

repeat       平铺

no-repeat    不平铺

repeat-x     只在水平方向上平铺

repeat-y     只在垂直方向上平铺

-->

<div style="height: 300px;background-image:url(img/123.jpg);background-repeat: repeat;">

撸起袖子加油干！

</div>

<!--

background-position:设置背景图片的位置

属性值：

1.left, right,top,bottom,center两两组合形成的 九个

2.x%  y%(百分比)

3.xpx ypx(像素值)

-->

<div style="height: 300px;background-image:url(img/456.jpeg);background-repeat: no-repeat;background-position:center center ;">

撸起袖子加油干！

</div>

</body>

</html>
















sxl1947842654
关注
csdn 博客的 css样式 v5
09-27
版权声明：原创作品，允许转载，转载时请务必以超链接形式标明文章原始出版、作者信息和本声明。否则将追究法律责任。http://blog.csdn.net/mayongzhan - 马永占,myz,mayongzhan面对csdn极其xx的改版，彻底xx。改吧。csdn把左右对调了一下，左边是文章，右边是导航
CSDN的CSS样式
tanll826's blog
08-29 1281
/*页面body块样式*/  <br />body{   <br />background:#f7fdfd;   <br />text-align:center;   <br />}   <br /><br />/*整体页面样式*/  <br />#csdnblog_allwrap{   <br />width:970px;   <br />height:auto;   <br />}<br />   <br />/*页面左侧*/  <br />#csdnblog_sidebar{   <br />widt
css样式大全
07-01
css样式大全 适合初学者的使用以及参考样式是不错的css整理文档
CSS样式初始化commonInitialize.css
01-18
CSS样式初始化是开发过程中一个重要的步骤，它旨在消除浏览器之间的默认样式差异，确保网页在不同浏览器上的一致性表现。"commonInitialize.css"就是这样一个专门用于全局CSS样式初始化的文件。 首先，我们来理解...
清除修改删除Vue自带的CSS样式
03-17
清除删除修改Vue自带的CSS样式，在Vue项目中写样式时发现总是出现一些奇怪的样式和字体颜色，后来发现是Vue自带了默认的CSS样式导致的，只要修改Vue自带的CSS样式即可。文件中附有修改样式的css文件以及详细教程。
Dreamweaver小技巧之应用CSS样式表
09-24
在本教程中，我们将探讨两个Dreamweaver中关于CSS样式的实用小技巧：去除超级链接的下划线以及创建可反复使用的外部CSS样式表。 首先，让我们看看如何去除超级链接的下划线并实现鼠标悬停时的变色效果。默认情况下...
Qt css样式大全+详细书签pdf.zip
12-05
本资源"Qt css样式大全+详细书签pdf.zip"包含了丰富的Qt CSS样式的教程和参考资料，旨在帮助开发者深入理解和掌握Qt界面美化技术。 首先，"Qt css样式大全(整理版） - wang13342322203的博客 - CSDN博客.html"是王...
Terminal-CSS:模拟旧式终端的 CSS 样式
06-15
【Terminal-CSS】是一种独特的CSS样式，其设计灵感源自旧时代的计算机终端，旨在为现代网页带来复古风格的视觉体验。这种样式通过纯CSS技术，能够将网页元素转化为类似早期ASCII字符终端的显示效果，营造出一种仿佛...
好看的css样式
01-30
很好看的css样式列表，自己经常使用的 。喜欢的朋友可以下载
CSS样式表
何静媛
05-22 3215
CSS的全称Cascading Stylesheets样式表，它可以对布局，字体，颜色，背景和其他文图效果实现更加精确的控制。   样式表的具体优势：   格式和结构的分离 HTML没有具体控制网页的格式或外观，浏览器自己决定应该如何显示。层叠样式表通过将定义结构的部分和定义格式的部分分离，使我们能够对页面的布局施加更多的控制。HTML仍可以保持简单明了的初衷。CSS代码独立出来从另一个
常用css样式
weixin_61430914的博客
07-20 561
行内样式表、内部样式表、外部样式表。
CSS样式预设
六月的兔子
03-20 1087
/*清除页面中标签自带的外间距和内填充*/ *{margin:0;padding:0;} /*清除ul自带的列表符*/ ul {list-style:none;} /*去掉a自带的下划线*/ a {text-decoration:none;} /*去掉img自带的边框*/ img {border:none;}
基本CSS样式
BinaryLie的博客
10-11 339
记录
多种实用的css样式
Leo的博客
06-10 429
立体按压按钮 鼠标点击-> <!DOCTYPE html> <html> <head> <style> a.button { position: relative; color: rgba(255,255,255,1); text-decoration: none; background-colo...
CSS样式大全（网络收集整理）
02-08 1491
CSS样式大全（网络收集整理 字体属性：(font) 大小{font-size:x-large;}(特大)xx-small;(极小)一般中文用不到，只要用数值就可以，单位：PX、PD 样式{font-style:oblique;}(偏斜体)italic;(斜体)normal;(正常) 行高{line-height:nor...
常用css样式大全以及css属性代码大全
最新发布
Java 技术专栏，从入门到精通，熟悉企业级开发
03-08 6057
常用css样式：字体属性、背景属性、区块属性、盒子属性、边框属性、列表属性、定位属性css属性：CSS文字属性、CSS边框空白、CSS符号属性、CSS背景样式、CSS连接属性、CSS框线一览表、CSS表单运用、CSS边界样式。
CSS常用样式
热门推荐
weixin_53988377的博客
07-24 1万+
CSS常用属性集合
Dreamweaver中的CSS样式详解
"本章详细介绍了CSS样式表的各个方面，包括CSS入门、创建和应用CSS。CSS（层叠样式表）是一种将网页内容与样式分离的技术，使得网页外观的修改更为方便。章节主要关注Dreamweaver中的CSS操作，如‘CSS样式’面板的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值