CSS简单学习(lecture 1)简介、语法、id和class、创建
2018-01-30 14:37
676 查看
lecture 1 简介、语法、id和class、创建
目录
lecture 1 简介语法id和class创建目录
教程
1简介
2语法
3Id和Class选择器
4创建
教程
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <style> body { background-color:#d0e4fe; } h1 { color:orange; text-align:center; } p { font-family:"Times New Roman"; font-size:20px; } </style> </head> <body> <h1>CSS 实例!</h1> <p>这是一个段落。</p> </body> </html>
1简介
CSS (Cascading Style Sheets)层叠样式表2语法
<html> <head> <style> body {background-color:yellow;} h1 {font-size:36pt;} h2 {color:blue;} p {margin-left:50px;} </style> </head> <body> <h1>This header is 36 pt</h1> <h2>This header is blue</h2> <p>This paragraph has a left margin of 50 pixels</p> </body> </html>
<html> <head> <style> body {background-color:tan;} h1 {color:maroon;font-size:20pt;} hr {color:navy;} p {font-size:11pt;margin-left:15px;} a:link {color:green;} a:visited {color:yellow;} a:hover {color:black;} a:active {color:blue;} </style> </head> <body> <h1>This is a header 1</h1> <hr> <p>You can see that the style sheet formats the text</p> <p><a href="http://www.w3cschool.cc" target="_blank">This is a link</a></p> </body> </html>
3Id和Class选择器
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <style> #para1 { text-align:center; color:red; } </style> </head> <body> <p id="para1">Hello World!</p> <p>这个段落不受该样式的影响。</p> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <style> .center { text-align:center; } </style> </head> <body> <h1 class="center">标题居中</h1> <p class="center">段落居中。</p> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <style> p.center { text-align:center; } </style> </head> <body> <h1 class="center">这个标题不受影响</h1> <p class="center">这个段落居中对齐。</p> </body> </html>
下面的就不列举了
4创建
相关文章推荐
- 学习笔记2017.07.07-day5,pm-CSS语法-CSS-ID和CLASS-CSS背景-CSS文本
- JavaScript 学习笔记3 CSS的ID、CLASS简单应用
- css教程之样式表的基本语法(二) class(类)和id的一个小实例
- CSS中的id选择器和class选择器简单介绍
- JavaScript简单学习(lecture 1)教程、简介、用法
- DIV+CSS学习--关于ID和CLASS
- css学习之id和class选择器
- Class与ID区别 margin和padding区别 CSS学习笔记
- CSS学习.0(基础知识,一般格式,class,id
- CSS学习之创建一个简单的导航栏
- CSS学习笔记:id与class、padding和margin、min-height和height
- PHP简单学习(lecture 1)教程、简介
- CSS学习之创建一个简单的导航栏下拉菜单
- C++简单学习(Part1_lecture 1)(介绍、环境设置、基本语法、注释)
- DIV+CSS学习--关于ID和CLASS
- CSS学习笔记-附加篇(div中class与id的区别及应用)
- Lua简单学习(lecture 1)教程、安装、基本语法
- CSS 简介、语法、派生选择器、id 选择器、类选择器、属性选择器
- HTML简单学习(lecture 1)简介、编辑器、基础、元素、属性
- CSS学习(3)--class和id、span和div