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简介1.CSS是Cascading Style Sheets(层叠样式表单)的简称.通常所称的CSS是指CSS1,即层叠样式表单1级. 2.编辑CSS文档:与编辑HTML的方法 ...
- 精通CSS+DIV网页样式与布局--页面背景
上篇博客,我们主要简单的总结了CSS的图片效果,我们这回来讲讲CSS如何对网页的背景进行设置,网页的背景是整个网页的重要组成部分,她直接决定了整个网页的风格和色调.这篇博客简单的总结一下如何用CSS来 ...
- 精通CSS+DIV网页样式与布局--初探CSS
CSS英文名Cascading Style Sheet,中文名字叫层叠样式表,是用于控制页面样式并允许将样式信息与网页内容分离的一种标记性语言,DIV+CSS是WEB设计标准,它是一种网页的布局方法. ...
- WEB入门三 CSS样式表基础
学习内容 Ø CSS的基本语法 Ø CSS选择器 Ø 常见的CSS样式 Ø 网页中3种使用CSS的方式 能力目标 Ø 理解CSS的 ...
- CSS+DIV网页样式与布局：第二章：CSS的基本语法
第二章:CSS的基本语法 一 CSS选择器(所有的HTML语言中的标记都是通过不同的css选择器进行控制的).用户只需要 通过选择器对不同的HTML标签进行控制,并赋予各种样式声明,即可实现各种效果. ...
- 详解CSS网页布局中默认字体样式
浏览器默认的样式往往在不同的浏览器.不同的语言版本甚至不同的系统版本都有不同的设置,这就导致如 果直接利用默认样式的页面在各个浏览器下显示非常不一致,于是就有了类似YUI的reset之类用来尽量重写浏 ...
- 精通CSS+DIV网页样式与布局--页面和浏览器元素
在页面和浏览器中,除了文字.图片.表格.表单等,还有很多各种各样的元素,在上篇博文中,小编主要简单的介绍了一下在CSS中如何设置表格和表单,今天小编主要简单介绍一下丰富的超链接特效.鼠标特效.页面滚动 ...
- 精通CSS+DIV网页样式与布局--图片效果
提到图片效果,小伙伴们可能会想到美图秀秀,ps等,这些软件都是款非常不错的照片处理软件,包括常用的:黑白,增强,高斯,高对比,夜视,老照片和铅笔画等等.不管你是否是专业的 照片拍摄人员,我们都可以通过 ...
- 动态样式语言—LESS基础知识
CSS是一门非程序式语言,缺少逻辑性,不便于维护 LESS在CSS现有语法的基础上,为CSS加入程序式语言的特性 引入了变量.混入.运算.函数等功能,大大简化CSS的编写,降低了CSS的维护成本 LE ...
随机推荐
- POJ 1679 The Unique 次最小生成树 MST
http://poj.org/problem?id=1679 题目大意: 给你一些点,判断MST(最小生成树)是否唯一. 思路: 以前做过这题,不过写的是O(n^3)的,今天学了一招O(n^2)的,哈 ...
- 8.3 Android灯光系统_编写HAL_lights.c
注意在led-classes.c中定义的led_class_attrs[]所建立的文件的属性应该改为0666,否则应用程序无权操作它 同时ledtrig-time.c里面对应新建的那几个delay_o ...
- VIM使用说明
[vim 命令-移动光标]:h 的鍵位于左邊,每次按下就會向左移動.l 的鍵位于右邊,每次按下就會向右移動.j 鍵看起來很象一支尖端方向朝下的箭頭.k朝上移动. [vim 命令-启动和退出]:1. 請 ...
- Eclipse高效开发插件汇总
以下是我整理的自己开发过程中的常用Eclipse插件,按字母排序: (1) AmaterasUML 介绍:Eclipse的UML插件,支持UML活动图,class图,sequen ...
- Spring Cloud项目
如何使用windows版Docker并在IntelliJ IDEA使用Docker运行Spring Cloud项目 如何使用windows版Docker并在IntelliJ IDEA使用Docke ...
- 25、驱动调试之打印到proc虚拟文件
1.dmesg指令是通过读/proc/kmsg来获取打印信息,也可以通过cat /proc/kmsg打印: 说明:kmsg是环形缓存区,只能读一次 2.内核中fs/proc目录下有相关文件,比如pro ...
- WM_CAP_DRIVER_CONNECT
WM_CAP_DRIVER_CONNECT //ActiveX ---->OnCreate m_pit.Create(IDD_CAM_DIALOG,this); CRect rc; this ...
- mac系统创建.开头文件.htaccess
thinkphp5 隐藏index.php的时候需要用的.htaccess文件,但是mac默认不让创建这种文件 感谢 https://blog.csdn.net/gyz413977349/articl ...
- IAdjustCountOption--动态设置recycleView的itemCount(不须要改动数据源)
概述 RecycleViewUtil是新增的一个主要针对RecycleView的一个工具类.该工具类中提供了部分RecycleView可能会使用到的方法,当中也包含了一些用来增强HeaderRecyc ...
- Android Error:(1,N1) 错误: 需要class, interface或enum
造成这个error的原因是Java文件编码格式不对, 比如可能是你之前这个文件是用GBK写的,后来复制到utf-8环境里编译,而文件里有些是隐藏的字符,很难找出来的. 解决方法是在Notepad++新 ...