css基础知识
1. 认识css
概念
- CSS(英文全称：Cascading Style Sheets)，层叠样式表。它是网页的装饰者，用来修饰各标签排版（大小、边距、背景、位置等）、改变字体的样式（字体大小、字体颜色、对齐方式等）、设置图片（宽高、位置等）等。
- CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。
- CSS可以帮助调整排版布局的展现 美化标签和内容 提高版面的信息密度 加强信息的冲击力和直观性
写在哪
css代码分为内部样式、外部样式、行内样式三种写法。
-
内部样式
写在HTML文档的
style标签中，style通常放置于头部：
<head>
<style>
/*这里写css代码*/
</style>
</head>style标签可以加上type="text/css"这条属性，用于告诉浏览器这里是什么格式的代码，但是在HTML5规范中可以不用写。
-
外部样式
单独创建
.css后缀的文件，然后通过link标签引入，link通常放置于头部：<head> <link href="CSS文件的路径" rel="stylesheet"> </head> -
行内样式/内联样式
直接写在标签属性中：
<body>
<p style="css代码">段落文字</p>
</body>-
三种方式比较
样式表 优点 缺点 使用情况 使用场景 行内样式表 书写方便，权重高 没有实现结构与样式分离，不便于维护，不可以重复利用 极少 某个标签需要单独的样式设置时使用 内部样式表 部分结构与样式分离，较便于维护 没有彻底实现结构与样式分离，不可以重复利用 一般 css代码量不多，且和当前页面联系紧密不需要复用时使用 外部样式表 完全实现结构与样式分离，可重复利用 如果代码量较少情况下，引入法更麻烦 最多，推荐 css代码量大时，或者需要重复利用时使用
如何写
/*选择器{属性:值;属性:值;}*/
p{
color: red;
font-size: 20px;
}
/*
规范：
值以分号结束
推荐换行书写，可读性更强
推荐 值 与 : 号之间加空格，可读性更强
*/2. 选择器初级
id与class命名
- id命名唯一，单个标签不允许拥有多个id名，同页面中不存出现重复的id名（id重名会影响js代码获取标签）
- class命名不唯一，单个标签可以拥有多个class名，不同标签允许使用相同class名
- 命名规范
- 允许 大写字母 小写字母 数字 –，必须以字母开头，单词一般小写；
- 见名知意，不允许单个字母做名字，各命名词汇英文参考：命名词汇 (opens new window)；
- 单词之间使用-号连词或者驼峰连词，具体看公司整体规范；
- 单词不要简写过渡，可以不影响理解的前提下简写。
评论（0）
暂无评论