1.外部途径:
建立xx.css文件与html文件放在同一目录下
加入 <link rel="stylesheet" type="text/css" href="4.css"/>
<!DOCTYPE html> <html> <head> <meta name="generator" content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" /> <meta charset="utf-8" /> <title>CSS样式</title> <meta name="keywords" content="用css给网页装潢" /> <meta name="description" content="用css给网页装潢" /> <link rel="stylesheet" type="text/css" href="4.css"/> </head> <body> <p>段落</p> <p>段落</p> <p>段落</p> <p>段落</p> </body> </html>
p{
font-size:40px;
color:red;
}
2.内页样式:直接写到html的头部分
<style type="text/css"> p{ font-size:40px; color:red; } </style>
<!DOCTYPE html> <html> <head> <meta name="generator" content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" /> <meta charset="utf-8" /> <title>CSS样式</title> <meta name="keywords" content="用css给网页装潢" /> <meta name="description" content="用css给网页装潢" /> <style type="text/css"> p{ font-size:40px; color:red; } </style> <!-- <link rel="stylesheet" type="text/css" href="4.css"/>--> </head> <body> <p>段落</p> <p>段落</p> <p>段落</p> <p>段落</p> </body> </html>
3.行内样式
<!DOCTYPE html> <html> <head> <meta name="generator" content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" /> <meta charset="utf-8" /> <title>CSS样式</title> <meta name="keywords" content="用css给网页装潢" /> <meta name="description" content="用css给网页装潢" /> </head> <body> <p style=" font-size:40px; color:red;">段落</p> <p>段落</p> <p>段落</p> <p>段落</p> </body> </html>
CSS 基本语法(语法简单的理解就是规则)
1)CSS 规则由两个主要的部分构成:
1、选择器
2、一条或多条声明。
选择器:要给元素装潢加样式(首先得选中需要装潢的元素)
声明:声明由一个属性和一个值组成
属性是您希望设置的样式属性。每个属性有一个值。属性和值被冒号分开,如果
要定义不止一个声明,则需要用分号将每个声明分开,养成良好的习惯,就算一
个声明我们也加上分号。
选择器{属性:值;}
使用空格以及回车让css 更可读!
选择器{
属性:值;
}
2)小试牛刀
选择器有一种最简单的写法直接写上你要选中的元素!
p {
color:red; 该行声明将颜色设置为红色
font-size:30px; 该行声明将字体大小设置为30px
}
查看效果!
3)CSS 加注释
/*注释的内容*/
<style type="text/css"> p{ font-size:40px; color:red; }/*css的注释*/ </style>