CSS 语法入门

CSS 是前端开发的基础。CSS 規則由兩個主要的部分構成:選擇器,以及一條或者多條聲明。 CSS 是前端开发的基础,主要由两个部分构成: 1. 选择器 2. 声明,可以是单条,也可以是多条

selector { declaration1; declaration2; ... declarationN;}

选择器通常是 HTML 中的元素。每条声明都是由一个属性和一个值构成,属性是希望设置的样式、属性,每个属性都有一个值,并用冒号分开。

selector {property: value}

下面代码的作用是将 h1 元素内的文字的颜色定义为红色,同时将字体的大小设置为 14 像素。

在这个例子中,h1 是选择器,colorfont-size 是属性,red14px 是值。

h1 {color : red; font-size: 14px;}

如果值是多个词组,可以给值增加引号。

p { font-family: "sans serif";}

如果林定义不止一个声明,则需要用分号将每个声明隔开。

下面的示例是将段落的字体定义为红色且居中。

虽然最后一个属性是不需要增加分号的,但是为了以后修改,最好在每条属性后面都增加分号分隔符。

p {
text-align: center;
color: black;
font-family: arial;
}

子元素总是继承你元素的属性。

body {
font-family: Vrdana, sans-serif;
}

这样,在 body 属性下的元素:p, td, ul, ol, li, dl, dt, dd 等都会继承 body 中定义的字体,同样继承来的值也可以进行重写。

body { font-family: Vrdana;}
p { font-family: Times;}

选择器、派生选择器:通过依据元素位置的上下文件关系来定义的样式。

li strong {
font-style: italic;
font-weight: normal;
}

ID 选择器:可以为标有特定 ID 的元素指定样式。

#red { color: red;}

ID 选择器也可以和派生选择器一起使用。

#sidebar p{
font-style: italic;
text-align: right;
margin-top: 0.5em;
}

单独选择器:可以单独发挥作用的选择器。

#sidebar {
border: 1px dotted #000;
padding: 10px;
}

类选择器:以一个点号作为开头。

.center { text-align: center;}

也可以用作派生选择器上。

.fancy td {
color: #f60;
background: #666;
}

元素也可以基于它们的类而被选择。

td.fancy {
color: #f60;
background: #666;
}

上面的两个示例中,第一个是类名为 fancy 的元素内容属性设置,下面的则是指 <td class='fancy'> 的元素的属性设置。

| 选择器 | 描述 | |------------------------|----------------------------------------------------------| | [attribut] | 用于选取带有指定属性的元素 | | [attribut=value] | 用于选取带有指定属性和值的元素 | | [attribut~=value] | 用于选取属性值中包含指定词条的元素 | | [attribut|=value] | 用于选取带有以指定开头的属性值的元素,该值必须是整个单词 | | [attribut^=value] | 匹配属性值以指定值开头的每个元素 | | [attribut$=value] | 匹配属性值以指定值结尾的每个元素 | | [attribut*=value] | 匹配属性值中包含指定值的每个元素 |

CSS 允许应用纯色做为背景,也允许使用背景图片创建一个繁杂的效果。

可以使用 background-color 指定背景色,这个属性接受任务合法的颜色值。可以利用这个将背景色配置为灰色。background-color 是不能被继承的。

p { background-color: gray;}
p { background-color: gray; padding:20px;}
Author
Tags
总结(3) Emacs(2) org mode(4) 年度清单(2) 读书清单(2) 电影清单(2) 电视清单(2) Python(3) 学习计划(1) 子弹笔记(1) 手帐体系(1) 时间管理(1) 时间使用效率(1) 形意拳(1) 知识管理(1) 简历(1) 技能水平(1) 生活(1) 减法生活(1) 阅读(1) 阅读分组(1) org(1) docx(1) markdown(2) cmder(1) 图床(1) jsdelivr(1) github(1) 安卓系统(1) 手动更新手机系统(1) post link(1) post path(1) hexo(2) hugo(2) GitHub Pages(1) travis(1) 自动部署博客(1) presentation(1) gcc(1) g++(1) 默认表格(1) 复杂表格(1) multimd table(1) google adsense(1) evil(1) surround(1) librime(2) emacs-rime(1) liberime(1) dot(1) graphviz(1) use-sub-superscripts(1) ditaa(1) Evil Multiple cursors(1) turn evil mode off(1) modifier keys(1) keymap(1) super(1) hyper(1) install Emacs(1) Mac OS(1) keybinds(1) clocktable(1) coding system(1) image library(1) keybind(1) spacemacs(1) org babel(1) homebrew(1) dd(1) diskutil(1) tmux(1) xcode(1) xcrun(1) node-gyp(1) tar(1) tree(1) pacman(1) plantuml(1) find(1) grep(2) du(1) apt-get(1) apt(1) regex(1) wildcard(1) zsh(1) gdb(1) lsof(1) netstat(1) rebase(2) workflow(1) 工作流(1) .gitignore(1) postbuffer(1) hung up(1) merge(1) cache(1) reset(1) Git(1) command(1) submodule(1) GitHub Pull Request(1) pr(1) Matplotlib(1) beautifusoup(1) 下载小说(1) SOLID(1) Leetcode(2) 透视表(1) read_excel()(1) pandas(1) conda(1) django(1) markdown-deux(1) mysql(1) oracle(1) 模糊查询(1) logging level(1) reflex(1) Field(1) Maven(1) Selenium(1) 下拉框(1) select into(1) insert into select(1) CAST(1) CONVERT(1) timestamp(1) concat(1) concat_ws(1) group_concat(1) union(1) grant privileges(1) 重置 root 密码(1) 报错 10060(1) 清理连接数(1) create user(1) set password(1) exists(1) in(1) markdown-it(1) emoji(1) tasks(1) valine(1) Code 504(1) Hugo(1) theme(1) substring(1) indexOf(1) RegExp(1) 定位节点(1) 正则匹配(1) async(1) 异步请求(1) css(2) layui(1) 滚动条(1) JavaScript(1)