CSS 学习记录(1)一些琐碎的内容
2022/1/29 23:10:47
本文主要是介绍CSS 学习记录(1)一些琐碎的内容,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
CSS学习记录
1、CSS语法
1.1 基本语法
1、使用选择符来说明CSS的作用范围
2、声明语句放在选择符后面的大括号内,多个声明语句是用分号隔开
1.2选择符
A.类选择符 class='name', 以.name{}进行渲染
1、类选择符必须以点号开头
2、类名只能包含字母、数字、连字符和下划线,切必须以字母开头
3、区分大小写
B.表选择符
标签名{属性1:值;属性2:值;}
C.id选择符
#id选择符{属性1:值;属性2:值;}
D.包含选择符
层层嵌套标签,中间使用逗号隔开
1.3样式表
1、内嵌式
2、内部样式
3、外部样式(推荐)
2、盒子模型
2.1概念
content+border+padding+margin
内容区域由:width+height构成
padding&border&margin: top&bottom&left&right
2.2 border属性
2.2.1 width属性
border-top/bottom/right/left-width:1px; border-width:1px 2px 3px #上边框1px,左右边框2px,下边框3px
2.2.2 color 设置边框颜色
2.2.3可以通过border综合属性进行border的综合设置
2.2.4 border-radius 指从左上角开始,顺时针设置各个弧角的半径
2.3 margin
按照上右下左顺时针方向进行设置
如若需要将几个div进行居中,这些div放入一个打的div中,并将这个大的div进行渲染,具体
div{ margin:0 auto; }
盒子的宽度&高度计算=文本内容宽度+边框宽度+外边距宽度
3、文本样式
3.1字体样式
1、font-family——控制字体
2、font-size——控制大小
3、font-style——设置元素的字形
4、font-weight——字体粗细
5、font综合属性设置
3.2文本样式
1、text-indent——设置缩进
2、text-align——设置对齐
3、line-height设置行高
4、text-shadow设置阴影
5、text-decoration设置下划线(underline)上划线(overline)删除线(line-through)以及闪烁(blink)
6、word-spacing(单词间隔)letter-spacing(字符间隔)
这篇关于CSS 学习记录(1)一些琐碎的内容的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-12-26CSS入门指南:从零开始学CSS
- 2024-12-26CSS基础入门教程
- 2024-12-25CSS基础知识入门教程
- 2024-12-25CSS考点入门教程:掌握基础知识点
- 2024-12-25CSS考点解析:初学者必会的基础教程
- 2024-12-07uniapp动态设置不同的css有哪些方法?-icode9专业技术文章分享
- 2024-12-07UniApp 中,怎么通过 CSS 设置 view 组件的水平居中效果?-icode9专业技术文章分享
- 2024-12-06TailwindCSS开发入门教程
- 2024-12-06TailwindCSS项目实战:从入门到上手
- 2024-12-06TailwindCss项目实战:初学者指南