网站首页 > 技术文章正文

【测试开发全栈--CSS」(1) css样式一探究竟

hmc789 2024-11-25 12:50:19 技术文章 2 ℃

说到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>

<head>

<title>体验CSS语法规范</title>

<style>

p {

color: red;

font: size 12px;

}

</style>

</head>

<body>

</body>

</html>

选择器是用于指定CSS样式的HTML标签，花括号里是对该对象设置的具体样式。属性和属性值以键值对的形式出现。属性是对指定的对象设置的样式属性，例如字体大小，文本颜色等。属性和属性之间，使用英文冒号 ":" 分开

属性结尾需要使用英文分号来表示 ";"

说下css的代码风格:

样式格式书写1.紧凑格式，如 h3 {color:green; font-size:20px;}2.展开格式, 如 h3 { color:green; font-size:20px;
}

2.样式大小书写风格

h3 {

color:red;

}

强烈推荐属性名、属性值等关键字全部使用小写字母(特殊情况除外)

3.样式空格风格

h3 {

color: pink

}

属性值前面，冒号后面，保留一个空格

选择器(标签)和大括号中间保留空格

好的，今天就先到这里了

上一篇： 19.HTML CSS边距、边框、填充和内容
下一篇： 10 个前端开发人员经常使用的 CSS 技巧

网站首页 > 技术文章 正文

【测试开发全栈--CSS」(1) css样式一探究竟

猜你喜欢

网站首页 > 技术文章正文