css3学习之旅-css的基本语法(1)
2015-09-24 10:02
519 查看
后面就将要介绍css的全面语法:
1.css介绍
2.css基本语法
3.css高级语法
4.css派生选择器
5.css的id选择器
6.css类选择器
7.css属性选择器
!!!!!css介绍
css是层叠样式表,极大地提高了效率
!!!!!!css的基本语法
selector{
property:value
}
1.属性大于一个后,要用分号分开 eg:h1{color:red;font-size:14px}
2. 如果属性值大于一个单词,要用“”包围。eg:p{font_family:”sans serif”}
!!!!!css高级语法
1.选择器分组:h1,h2,h3,h4,h5,h6{color:red}
2.继承:body{color:green} ,如果在body定义了样式,body里面的元素如果没有声明样式,会继承body的属性
!!!!代码实例 ,index代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Html5样式</title> <link href="MyCss.css" type="text/css" rel="stylesheet"> </head> <body> <h1>这是一个样式</h1> <a href="http://www.baidu.com">百度一下</a> <h2>这是标题2样式</h2> <h3>这是H3样式</h3> </body> </html>
css代码
h1,h2,a{ color: blue; }
!!!@!效果图
继承实例,index代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Html5样式</title> <link href="MyCss.css" type="text/css" rel="stylesheet"> </head> <body> <h1>这是一个样式</h1> <a href="http://www.baidu.com">百度一下</a> <h2>这是标题2样式</h2> <h3>这是H3样式</h3> <p>这是一个段落</p> </body> </html>
css代码
h1,h2,a{ color: blue; }
body{
color:red;
}
p{
color:chartreuse;
}
!!!效果图
相关文章推荐
- Android Native 绘图方法
- Web布局连载——两栏固定布局(五)
- [div+css]晒晒最新制作专题推广页模板
- HTML5中在客户端验证文件上传的大小
- Canvas 在高清屏下绘制图片变模糊的解决方法
- 设计更快的网页(三):字体和 CSS 调整
- 纯CSS制作的新闻网站中的文章列表
- 10条影响CSS渲染速度的写法与使用建议第1/3页
- BS项目中的CSS架构_仅加载自己需要的CSS
- 很不错的 CSS Hack 又学了一招
- 发一个css比较清爽的写法
- CSS expression控制图片自动缩放效果代码[兼容 IE,Firefox]
- css布局网页水平居中常用方法
- CSS经典技巧十则第1/2页
- css 兼容性问题this.style.cursor=''hand''
- IE6不能正常解析CSS文件问题的解决方法及原因分析
- 欲练CSS ,必先解决IE的一些细节分析
- CSS文字截取功能实现代码
- 支持IE6 IE7 Firefox 的纯CSS的下拉菜单