【轻松前端之旅】CSS入门

编写css,很自然的思路:

1、给哪些元素添加样式呢?选择器技术就解决这个问题。

2、添加哪些样式?这就要了解css样式属性及它的值对应的显示规则了。

因此,学习css首先要学的就是选择器,至于样式属性需要靠实践的积累了。

CSS选择器,用于选择需要添加样式的元素。

选择器就是一个遍历树的算法。HTML元素以树结构构成HTML文档,选择器遍历树找到符合条件的元素。

选择器的种类(可以理解为按什么条件遍历):

1、元素选择器

如:p {color:red;}

这个样式将应用到页面里的所有p元素。

2、类选择器

给html元素添加class属性后,使用“.”定义。

如,选择所有class为class1的元素

.class1 {color:red;}

再如,选择class为class1的所有p元素。

p.class1 {color:red;}

省略去元素名就可以了。

3、id选择器

给html元素添加id属性后,以"#"定义。

如:#id1 {color:red;}

给一个html元素设置多个class样式,很简单用空格隔开就好:

如:<p class="class1 class2 class3...">

给多个html元素编写统一样式,也很简单,用逗号隔开就好:

如:p,h1,h2,.class1{ color:red;}

css属性的继承与覆盖继承:

子元素会继承父元素的属性,但如果子元素指定了与父元素相同的属性,就会覆盖继承。不过不是所有属性都可以继承的,如字体、字体颜色等属性是可以继承的,边框属性却不可以继承。

样式冲突

当元素应用了几组样式规则时,可能会有些规则重复定义了,这时候浏览器如何选择样式?这就要设计样式的优先级了,有权重计算方法,待研究。

一般规则: id选择器>class选择器>元素选择器。

然后是按加载顺序,后加载的优先级高。

还有指定了!important的优先级最高。

验证css:可以通过这工具来验证:http://jigsaw.w3.org/css-validator/

css选择器用法,来自http://www.w3school.com.cn/cssref/css_selectors.asp

扫一扫关注,学习编程:

时间: 2024-10-15 23:29:17

【轻松前端之旅】CSS入门的相关文章

python前端HTML和CSS入门

前端阶段课程介绍1 ~ 4 : HTML及CSS5 ~ 6 : JavaScript 7 ~ 10 : jQuery 00-知识点预习1.HTML基本结构2.HTML的常用标签3.HTML布局入门4.CSS概述5.CSS书写方式6.CSS常用选择器7.CSS常用属性 01-什么是HTML?HTML 是用来描述网页的一种语言. HTML 指的是超文本标记语言: HyperText Markup LanguageHTML 不是一种编程语言,而是一种标记语言 标记语言是一套标记标签 (markup t

前端教程(9)css入门教程-css属性设置

一 字体属性 1.font-weight:文字粗细 取值 描述 normal 默认值,标准粗细 bord 粗体 border 更粗 lighter 更细 100~900 设置具体粗细,400等同于normal,而700等同于bold inherit 继承父元素字体的粗细值 2.font-style:文字风格 normal 正常,默认就是正常的 italic 倾斜 3.font-size:文字大小 fs:一般是12px或13px或14px 注意: 1.通过font-size设置文字大小一定要带单位

【轻松前端之旅】HTML的块元素、行内元素和空元素

块(block)元素 显示成一块,前后有换行.块元素常用于web页面的主要构造模块.例如:<div>,<p>,<h1>~<h6>,<blockquote> 行内(inline)元素(内联元素) 显示在行内,内容与父元素内容在一行.内联元素通常用来标记小段内容.例如:<q>,<em> 空(void)元素 没有内容,用一个开始标签即可.如:<br>,<img> 实体字符(character entity

前端教程(10)css入门教程-css网页布局

一 网页布局方式 #1.什么是网页布局方式 布局可以理解为排版,我们所熟知的文本编辑类工具都有自己的排版方式,比如word,nodpad++等等 而网页的布局方式指的就是浏览器这款工具是如何对网页中的元素进行排版的 #2.网页布局/排版的三种方式 2.1.标准流 2.2.浮动流 2.3.定位流 二 标准流 标准流的排版方式,又称为:文档流/普通流,所谓的文档流,指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列. # 1 浏览器默认的排版方式就是标准流排版方式 # 2 在CSS中将

前端之旅——CSS

CSS 定义 CSS是Cascading Style Sheets 的简称,中文称是层叠样式表 属性和属性值用冒号隔开,以分号结尾 CSS  四种引入方式 1.行内式 行内式是在标签的style属性中设定CSS样式 <div style="..."><div> 2.嵌入式 嵌入式是将CSS样式集中写在网页的<head>头标签的<style></style>标签中 <head> ... <style type=

前端开发HTML&amp;css入门——HTML

HTML究竟为何物?其实HTML就是一种标记语言,英文全称为Hypertext Markup Language,翻译过来就叫超文本标记语言.它的作用就是负责负责网页的三个要素之中的结构. HTML使用标签的的形式来标识网页中的不同组成部分. 所谓超文本指的是超链接,使用超链接可以让我们从一个页面跳转到另一个页面.点一下试试. 那么既然是文本标记语言,我们自然能用txt来编辑HTML语言.打开windows自带的记事本工具,键入以下内容: 这是我第一个网页 因为我们编写的是HTML网页,所以一定要

前端开发HTML&amp;css入门——CSS的文本格式化

长度单位 像素 px 百分比 % em - 像素是我们在网页中使用的最多的一个单位, * 一个像素就相当于我们屏幕中的一个小点, * 我们的屏幕实际上就是由这些像素点构成的 * 但是这些像素点,是不能直接看见. * - 不同显示器一个像素的大小也不相同, * 显示效果越好越清晰,像素就越小,反之像素越大. - 也可以将单位设置为一个百分比的形式, * 这样浏览器将会根据其父元素的样式来计算该值 * - 使用百分比的好处是,当父元素的属性值发生变化时, * 子元素也会按照比例发生改变 * - 在我

前端开发HTML&amp;css入门——盒子模型以及部分CSS样式

CSS处理网页时,它认为每个元素都包含在一个不可见的盒子里.• 为什么要想象成盒子呢?因为如果把所有的元素都想象成盒子,那么我们对网页的布局就相当于是摆放盒子.• 我们只需要将相应的盒子摆放到网页中相应的位置即可完成网页的布局. 盒子模型 一个盒子我们会分成几个部分:– 内容区(content)– 内边距(padding)– 边框(border)– 外边距(margin) 盒子和边框   width和height background-color 盒子 设置的盒子内容区的大小 设置背景颜色  

作为一个前端工程师,CSS是最基本的入门课,你都能做出来吗?

CSS在很多程序员看来那只不过是雕虫小技, 实际上CSS3发展到今天已经强大到超乎你的想象, 当然对于低端浏览器使用者来说,还是以前那样——囧 有时候搞CSS开发确实需要很多想象力,下面一组纯CSS3特效足以描述这一点 以下内容转载自[http://design.yesky.com/show/466/11497966_3.shtml] 设计欣赏:纯CSS3「绘制」的图形图标 IE 标志 作者: Andreas Jacob 在 Firefox 3.6+ 以及Safari 5 上显示最佳.使用了圆角