极客学院----H5的相关笔记----css基础（一）

最新推荐文章于 2018-07-28 22:42:19 发布

wypgany

最新推荐文章于 2018-07-28 22:42:19 发布

阅读量285

点赞数

分类专栏： h5 杂记·笔记

本文链接：https://blog.csdn.net/wypgany/article/details/53894720

版权

h5 同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

杂记·笔记

9 篇文章 0 订阅

订阅专栏

一.介绍及语法

1.概述：CSS是指层叠样式表。

2.基础语法：selector{property1:value1;property2:value2;}若值大于一个单词，则需要用“”括起来

eg.h1 { color:red; font-size:14px; }

3.使用：在html文件的head中引用，

4.高级语法：

（1）选择器分组：h1,a,h2 { color:red; } 即可以一次定义多个标签的样式（如果是一样的）

（2）继承：body { color:green; } 即若body中的标签没有单独自定义样式，则使用body定义的

二.派生选择器（只是部分）

概述：通过依据元素在其位置的上下文关系来定义样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>派生选择器的学习</title>
    <link href="myCss.css" type="text/css" rel="stylesheet">
</head>
<body>
    <h1><strong>第一行数据</strong></h1>
    <p><strong>第二行数据</strong></p>
    <h1>第三行数据</h1>
    <h2>第四行数据</h2>
</body>
</html>

myCss.css

h1 {
    color:green;
}
p,h1 strong{
    color: red;;
}
/* 以上写法相当于
p{ color:red;}
h1 strong{ color:red;}
*/
strong{
    color:blueviolet;
}
body{
    color:deepskyblue;
}

三.id选择器

1.概述：id选择器可以为标有id的HTML元素指定特定的样式，以“#”来定义。

eg.html页面定义的id---->id

在css文件中：#id{ color:red;}

2.id选择器常与派生选择器一起使用。

eg.要让“哈哈”是红色

html文件：<p id="pid">呵呵<a>哈哈</a></p>

css文件：#pid a { color:red;}

四.类选择器

1.以“.”来定义 eg. .class{ color:red;}

2.可与派生选择器一起使用

eg.要让“哈哈”是红色