CSS学习

简介: CSS学习基础选择器字体和文本样式

基础选择器

1.标签选择器:{css属性名:属性值;},选择页面中对应的标签,方便在后续设置样式

2.类选择器:.类名,通过类名,找到页面中所有带有这个类名的标签,设置样式

3.id选择器:#id属性值,通过id属性,找到页面中带有这个id属性值的标签,设置样式

4.通配符选择器:{css属性名:属性值},找到页面中所有的标签,设置样式


字体和文本样式

1.字体样式:

字体大小:font-size=数字px;

字体粗细:font-weight(normal和400正常,bold和700加粗);

字体样式:font-style(italic倾斜,normal正常默认值);

字体类型:font-family(宋体,微软雅黑…);

字体类型:font属性连写

2.文本样式

1.文本缩进:text-indent(数字px或数字em=当前字体大小的几倍)

2.文本水平对齐方式:text-align(left左对齐,center居中对齐,right右对齐)

3.文本修饰:text-decoration(underline下划线,none无修饰线)

3.line-height

*数字px或倍数

font和行高连写时注意:

font:style weight size/line-height family;


相关文章
|
3月前
|
前端开发 JavaScript
个人征信电子版无痕修改, 个人信用报告pdf修改,js+html+css即可实现【仅供学习用途】
本代码展示了一个信用知识学习系统的前端实现,包含评分计算、因素分析和建议生成功能。所有数据均为模拟生成
|
3月前
|
前端开发
个人征信PDF无痕修改软件,个人征信模板可编辑,个人征信报告p图神器【js+html+css仅供学习用途】
这是一款信用知识学习系统,旨在帮助用户了解征信基本概念、信用评分计算原理及信用行为影响。系统通过模拟数据生成信用报告,涵盖还款记录
|
前端开发
5.CSS学习(浮动)
【7月更文挑战第29天】
103 4
学习CSS3 中的渐变、阴影与遮罩
CSS3的渐变、阴影和遮罩特性极大地丰富了网页设计。渐变让颜色平滑过渡,赋予页面流动美感;阴影增加元素立体感,引导视觉焦点;遮罩通过隐藏或显示部分元素创造独特视觉效果。这些特性组合使用,可打造丰富多彩、立体生动的视觉体验,并可通过CSS3动画增强动态效果,使网页更具活力。正确应用这些特性需考虑参数调整及跨浏览器兼容性,以确保最佳展示效果。
|
Web App开发 JSON 前端开发
Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解(学习总结---从入门到深化)
Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解(学习总结---从入门到深化)
424 0
|
JSON 前端开发 JavaScript
Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解(学习总结---从入门到深化)(上)
Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解(学习总结---从入门到深化)
165 0
|
前端开发
|
Web App开发 移动开发 自然语言处理
|
前端开发
学习css的clip-path属性
【7月更文挑战第1天】了解CSS `clip-path`属性,用于定义元素显示区域的裁剪形状,如圆形、椭圆、多边形、矩形及SVG路径。通过配合过渡和动画,可创建动态交互效果。例如,`clip-path: circle(radius at center);`用于创建圆形裁剪,`polygon`用于自定义多边形。还可以使用`path()`引用SVG路径数据。[资源推荐:bennettfeely.com/clippy/](https://bennettfeely.com/clippy/),提供交互式工具测试不同形状。
399 0
学习css的clip-path属性