HTML5学习笔记<八>: 1. CSS3基础之入门基础知识

时间 2019-12-07

标签 html5 html 学习笔记 css3 css 基础入门知识栏目 HTML5 繁體版

原文原文链接

CSS基础-介绍及语法

1. CSS介绍

概述:css

　　CSS指层叠样式表html

　　CSS样式表极大地提升了工做效率css3

2. CSS基础语法

　　selector { property1 : value1; property2: value2 ;}spa

例: h1 {color:red; font-size:14px;}code

属性大于1个以后, 属性之间用分号隔开. 若是值大于1个单词, 则须要加上引号:p{font-family: "sans serif";}htm

建立css文件, 打开IntelliJ IDEA, 新建一个项目, 右击项目文件夹, new--> file, 出现的对话框中键入mycss.css(需指定文件扩展名)blog

并建立一个HTML file.继承

代码:it

index.htmlio

<!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>

南心芭比: 热爱分享, 收获快乐~