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>
南心芭比: 热爱分享, 收获快乐~