【测试开发全栈--CSS」(1) css样式一探究竟
source link: https://blog.51cto.com/u_11894/5682254
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
【测试开发全栈--CSS」(1) css样式一探究竟
精选 原创说到HTML，就不得不提到CSS样式，接下来我们就会讲解CSS在HTML语言中的使用。具体要讲解的内容有:
CSS简介
CSS基础选择器
CSS字体属性
CSS文本属性
CSS的引入方式
Chrome调试工具
CSS的主要使用场景就是美化网页，调整页面布局的。这里就不得不提下HTML的局限性。HTML,只关注内容的语义，主要做结构，显示元素内容。比如<h1>表明这是一个大标题，<p>表明这是一个段落，<img>表明这有一张图片，<a>表明这有一个链接。纯HTML网页都有一个特点，就是页面很丑~~~ 虽然HTML可以做简单的样式调整，但是带来的是无尽的代码臃肿和繁琐。
CSS是网页的美容师:
css是层叠样式表，Cascading Style Sheets的简称，有时候也称为CSS样式表或级联样式表。css也是一种标记语言，语法比较简单。css主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)，以及版面的布局外观显示样式。css可以美化HTML,使HTML更漂亮，让页面布局更简单。
CSS的最大价值: 让HTML专注去做结构呈现，样式交给css,即结构HTML和样式CSS相分离。
接着说下CSS的语法规范:
css规则由两个主要的部分构成，选择器以及一条或者多条声明。
来看个实例
相当于使用css中的<style>标签属性讲段落<p>里的文字内容设置为红色
来看看对应的代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>体验CSS语法规范</title>
<style>
color: red;
font: size 12px;
</style>
</head>
<body>
<p>标个段落</p>
</body>
</html>
选择器是用于指定CSS样式的HTML标签，花括号里是对该对象设置的具体样式。属性和属性值以键值对的形式出现。属性是对指定的对象设置的样式属性，例如 字体大小，文本颜色等。属性和属性之间，使用英文 冒号 ":" 分开
属性结尾需要使用英文分号来表示 ";"
说下css的代码风格:
- 样式格式书写
1.紧凑格式，如 h3 {color:green; font-size:20px;}
2.展开格式, 如
h3 {
color:green;
font-size:20px;
}
2.样式大小书写风格
color:red;
强烈推荐属性名、属性值等关键字全部使用小写字母(特殊情况除外)
3.样式空格风格
color: pink
属性值前面，冒号后面，保留一个空格
选择器(标签)和大括号中间保留空格
好的，今天就先到这里了
- 赞
- 收藏
- 评论
- 分享
- 举报
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK