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;


相关文章
|
XML 编解码 前端开发
css核心知识学习
css核心知识学习
69 0
|
6月前
|
前端开发
5.CSS学习(浮动)
【7月更文挑战第29天】
43 4
学习CSS3 中的渐变、阴影与遮罩
CSS3的渐变、阴影和遮罩特性极大地丰富了网页设计。渐变让颜色平滑过渡,赋予页面流动美感;阴影增加元素立体感,引导视觉焦点;遮罩通过隐藏或显示部分元素创造独特视觉效果。这些特性组合使用,可打造丰富多彩、立体生动的视觉体验,并可通过CSS3动画增强动态效果,使网页更具活力。正确应用这些特性需考虑参数调整及跨浏览器兼容性,以确保最佳展示效果。
|
4月前
|
前端开发
|
4月前
|
Web App开发 移动开发 自然语言处理
|
6月前
|
前端开发
学习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/),提供交互式工具测试不同形状。
115 0
学习css的clip-path属性
|
6月前
|
前端开发 JavaScript 开发者
学习CSS动画的高级技巧
【7月更文挑战第1天】学习CSS动画的高级技巧
55 2
|
6月前
|
前端开发 JavaScript 开发者
如何学习CSS动画?
【7月更文挑战第1天】如何学习CSS动画?
39 1
|
8月前
|
Web App开发 JSON 前端开发
Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解(学习总结---从入门到深化)
Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解(学习总结---从入门到深化)
264 0
|
8月前
|
JSON 前端开发 JavaScript
Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解(学习总结---从入门到深化)(上)
Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解(学习总结---从入门到深化)
101 0

热门文章

最新文章