CSS（网页样式语言）基础

所谓全栈，个体可以独立地完成系统的设计、开发、测试、部署以及运维。打通一个领域从无到有的全过程。

为什么会有 markdown 文本编辑显示工具呢，因为 html 太重了。markdown 是 html 的一种简化思路，css 则是另外一种。css 是对 html 其中部分工作的提取和分担，这部分的工作就在于 html 各种标签的属性以及 style 属性的定制等。使得 html 单纯用于文档结构格式和整体布局。

css 是 html 的一个辅助语言，用来描述网页样式，html 没有css也可以工作（可以通过标签的各种属性以及 style 属性定制样式），但 css 可以把样式做抽象，和 html 剥离，这样 html 单纯用作布局（css 与 html 的关系因此也可以看做，抽象和分离的关系）。

hello_world.html

<html><head><link rel="stylesheet" type="text/css" href="style.css" /></head><body><h1>hello world</h1></body>
</html>

style.css
```
h1 {color: red
}
```

1. 设置标签样式

CSS 样式通常写在<head></head>下的 <style></style>下：

<html><head><style type="text/css"> </style></head><body>...</body>
</html>

我们可以在 style 标签内将 body 标签的前景色设置为红色：
```
<style type="text/css">body {color: red;}
</style>
```

2. 设置 id 样式

比如我们在网页主体（body）中使用<div>标签（div，division，区块，用于划分版区），定义一个 id 为 swatch 的版区：
```
<body><div id="swatch"> </div>
</body>
```

通过 # 进行索引，然后设置样式：

<style type="text/css">#swatch {width: 150px;height: 100px;color: #fff;background-color:blue;}
</style>

3. 设置 class 的样式

class 类属性用来标识一组具有相同性质的元素；

<body><p class="marker">....</p><p><span class="marker">....</span><span class="marker">....</span></p>
</body>

通过 . 进行选择定位：

<style type="text/css">.marker {background-color:#ff;}
</style>

4. 复合选择器（compound selector）

<div id="bt"><a >....</a>
</div>
<p><a ...></a>
</p>

这时如何定位<div>下的 <a>而不是<p>下的呢？就要用到 compound selector 的概念了：

#bt a {text-decoration: none;
}

CSS（网页样式语言）基础相关推荐

CSS(网页样式语言)基础,网页CSS设计样式基础知识点小白教程
什么是CSS? CSS由哈坤·利在1994年提出,到1996年正式完成了CSS语言,并且在1998年收录到W3C组织. CSS(Cascading Style sheet),用于控制网页样式,并允许将 ...
海量数据预处理实战----CSS网页样式
目录 CSS网页样式--选择器实验目的实验原理实验步骤 CSS引入方式和优先级实验总结 CSS网页样式--常用样式实验目的实验原理 1.文本样式 2.文字样式 3.链接样式 ...
html(+css)/01/html语言基础，标记，标记语法，html文档结构
厚积薄发 html(+css)/01/html语言基础,标记,标记语法,html文档结构工资:4500元左右/月最好的学习html的方法,就是多参考别人的网页源代码: 查看源代码: 1,打开网页/ ...
CSS 网页样式大全
字体属性:(font) 大小 font-size: x-large;(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX.PD 样式 font-style: obliqu ...
前端开发培训基地，教你用CSS清除样式
一.如何入门,学习建议在你开始入手学习前,有一些小的建议.根据我自己学习的经验发现,这些建议在现在乃至我以后的岗位生涯里都是有很大帮助的.还有就是开始学习前,建议可以先花几天时间,查找一些如何入门的 ...
css规则由两部分构成,CSS-层叠样式表基础教程
CSS-层叠样式表基础教程层叠样式表(Cascading Style Sheets,简写CSS),网页可以使用CSS来决定文件的颜色.字体.排版等显示特性.CSS最主要的目的是将文件的结构和内容(用 ...
精通CSS.DIV网页样式与布局（四） ——页面背景
咱们这回来讲讲CSS如何对网页的背景进行设置,网页的背景是整个网页的重要组成部分,他直接决定了整个网页的风格和色调.我们这回主要来学习如何用CSS来设置背景颜色.背景图片. 背景颜色:CSS设置背景颜 ...
精通CSS+DIV网页样式与布局--页面背景
上篇博客,我们主要简单的总结了CSS的图片效果,我们这回来讲讲CSS如何对网页的背景进行设置,网页的背景是整个网页的重要组成部分,她直接决定了整个网页的风格和色调.这篇博客简单的总结一下如何用CSS来 ...
【网页制作】CSS尺寸样式属性
CSS尺寸样式属性作用:给html元素设置高度和宽度. 注意:只有块级元素才可以设置宽度和高度. 属性名称作用单位/值 height 设置元素的高度 length:使用px表示高度 auto:自动 ...