专业编程教程与实战项目分享平台

网站首页 > 技术文章 正文

前端网页web开发大神总结的HTML样式，长伴一生

ins518 2024-09-29 18:37:24 技术文章 367 ℃ 0 评论

鹿晗和迪丽热巴组队叫陆地

鹿晗和关晓彤在一起叫撸管？

前几天公布了恋情，不是很关注娱乐圈，但是却发生一件重大的事情，听说新浪服务器都承受不住那么多人同时刷微博，运维考虑成本没有做这方面处理，果然两耳不闻窗外事，哈哈

CSS（层叠样式表）

什么是CSS

CSS（层叠样式表）用来规定HTML文档的展现形式

CSS的声明

CSS属性和值用冒号分隔，每条样式结束后加分号

color: red;

选择器

class选择器

用来将元素归成一类，并且可以对这一类元素应用样式，使用 . 小数点 进行选择

id选择器

给元素置顶一个，唯一的标识符，这种标识符仅能单独对一个元素应用样式 通常用于JS获取元素

CSS选取该元素使用#号选中

通配符

*表示选择所有的元素除了<!doctype>以外的元素

选择器权重值

!important > 内联样式 > id的选择器 > class选择器 > 元素选择器

id > class > p

id吨 > class千克 > p克

样式的应用

内联样式

样式声明定义之后，需要被应用<p style="color: blue;background: gray;"></p>

style元素内容应用样式

<title>我是页面主题</title>
<style>
 p { color : green; background : gray;}
</style>
</head>
<body>
 
 <p>应用样式</p>

</body>

通过link应用

<link rel=”stylesheet” type=”text/css” href=”css.css” /><!-- relationship的英文缩写 关联 -->

文本样式

描述代码
文本颜色color: red;
背景颜色background: red;
字符间距letter-spacing: 2em;
空格间距word-spacing: 6px
字行间距line-height: 14px;
对齐方式text-align: center/left/right;
文本缩进text-indent: 2em

ps: 单位em是相对于字体大小而定的，是个相对单位

装饰文本 (decoration)

值描述
none默认，没有装饰
underline下划线
overline上划线
line-through中划线（删除线）

a标签默认添加下划线 可以通过text-decoration: none;取消默认的下划线

字体样式

代码描述
font-size字体大小
font-family文字字体
font-style字体风格 normal / 倾斜italic

文字加粗

font-weight

  • 100-300 细体

  • 400-500 默认

  • 600-900 粗体

    PS：通常部分字体只有粗细，想要体验到100-300细体的变化可以在google字体上预览

fonts.google.com/

点击Regular 如果字体还支持别的粗细变化，则会展示出来 并且预览~

背景属性

代码描述
background-color背景颜色
background-image: url(xxxx);背景图像
background-repeat背景填充
background-position背景定位X值 Y值
background-size背景大小

background-size: 100% 100% 不能加在body元素上，可能不会生效

background-repreat 背景重复

代码描述
repeat以平铺的方式重复图像(默认x+y)
repeat-x以x水平(横向)方向重复图像
repeat-y以y垂直(纵向)方向重复图像
no-repeat不重复图像

background-size 规定图像的尺寸

代码描述
length水平, 垂直 支持像素单位也支持我们的百分比单位
cover使图像x拉伸到最大尺寸，不够时超出

文字的部分样式是继承关系，子元素也会被应用，设计模式就是这样，没有办法取消，冲突的时候只有添加选择器重写样式，想想如果没有文字样式的继承模型，那每个元素都要给颜色，会很麻烦

Tags：

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

欢迎 你 发表评论:

最近发表
标签列表