CSS基础-介绍及语法
1. CSS介绍
概述:
CSS指层叠样式表
CSS样式表极大地提高了工作效率
2. CSS基础语法
selector { property1 : value1; property2: value2 ;}
例: h1 {color:red; font-size:14px;}
属性大于1个之后, 属性之间用分号隔开. 如果值大于1个单词, 则需要加上引号:p{font-family: "sans serif";}
创建css文件, 打开IntelliJ IDEA, 新建一个项目, 右击项目文件夹, new--> file, 出现的对话框中键入mycss.css(需指定文件扩展名)
并创建一个HTML file.
代码:
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS</title> <link href="mycss.css" type="text/css" rel="stylesheet"> </head> <body> <h1>应用了样式表</h1> </body> </html>
mycss.css
h1 { color: red; font-size: 50px; }
3. CSS高级语法
1. 选择器分组:
h1, h2, h3, h4, h5, h6{color:red;}
代码:
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS</title> <link href="mycss.css" type="text/css" rel="stylesheet"> </head> <body> <h1>应用了样式表</h1> <a>h2样式</a> <h2>h3应用了吗</h2> <h3>h3样式</h3>
</body> </html>
mycss.css
h1,h2,a { color: red; font-size: 50px; }
2. 集成:
body{color:green;}
代码:
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS</title> <link href="mycss.css" type="text/css" rel="stylesheet"> </head> <body> <h1>应用了样式表</h1> <a>h2样式</a> <h2>h3应用了吗</h2> <h3>h3样式</h3> <p>hell css3</p> 南心芭比 </body> </html>
mycss.css
h1,h2,a { color: red; font-size: 50px; } body { color: blueviolet; }
运行结果:
说明:标签h1, h2, a 都有样式表, 所以以自己的样式表为主.
标签h3没有样式表, 则继承body的样式表.
4. 派生选择器
派生选择器:
通过依据元素在其位置的上下文关系来定义样式
代码:
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS</title> <link href="mycss.css" type="text/css" rel="stylesheet"> </head> <body> <p><strong>标签 hello css</strong></p> <ul> <li><strong>li 标签: hello strong</strong></li> </ul> </body> </html>
mycss.css
li strong { color: green; } strong { color: blue; }
运行结果:
说明: 通过li+空格+strong的方式来定义列表项中的strong标签的样式, 而p标签中不会影响到
如果单独定义一个strong样式表, 除了指定定义了同名的strong标签的样式之外的所有strong标签都将被定义此样式
5. id选择器
1. 概述:
id选择器可以为标有id的HTML元素指定特定的样式
id选择器以"#"来定义样式
代码:
html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS</title> <link href="mycss.css" type="text/css" rel="stylesheet"> </head> <body> <!-- 为p标签加上id --> <p id="pid"> hello css</p> </body> </html>
css
/*为id选择器添加样式*/ #pid { color: green; }
通常情况下 我们是把<div> 定义为id选择器.
2. id选择器和派生选择器
目前比较常用的方式是id选择器常常用于建立派生选择器
代码:
html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS</title> <link href="mycss.css" type="text/css" rel="stylesheet"> </head> <body> <div id="divid"> 这是第一个div选择器 <p>id选择器和派生选择器</p> </div> </body> </html>
css
#divid p{ color: green; }
运行结果:
说明: <div>内的文字没有样式, 而<div>内的<p>有样式, 这是id选择器与派生选择器的用法
6. 类选择器
1. 类选择器:
类选择器是以一个点显示
2. class也可以用作派生选择器
代码:
html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS</title> <link href="mycss.css" type="text/css" rel="stylesheet"> </head> <!-- 类选择器 --> <p class="pclass">这是一个类选择器</p> <div class="dclass"> 类选择器 <!-- class下的派生选择器 --> <p>我是派生选择器</p> </div> </body> </html>
css
/*类选择器*/ .pclass{ color: blue; } /*类选择器的派生选择器p*/ .dclass p{ color: red; }
7. 属性选择器
1. 属性选择器
对带有指定属性的HTML元素设置样式
2. 属性和值选择器
代码:
html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS</title> <style type="text/css"> /*属性选择器*/ [title]{ color: cadetblue; } /*属性和值选择器*/ [title=te]{ color: aquamarine; } </style> </head> <p title="title">属性选择器</p> <!--当设置了属性和值选择器, 则设置属性时, 值必须给指定的值, 否则将不生效 或 指定属性选择器--> <p title="te">属性和值选择器</ptit> </body> </html>
南心芭比: 热爱分享, 收获快乐~