CSS学习笔记1

最新推荐文章于 2024-01-22 21:50:59 发布

游向大海的鱼

最新推荐文章于 2024-01-22 21:50:59 发布

阅读量101

点赞数

分类专栏： DIV+CSS

DIV+CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

CSS简介

CSS ：Cascading Style Sheets，层叠样式表。

CSS的主要目的：是给HTML标记添加各种各样的表现（格式、样式）。比如：文字样式、背景、文本样式、链接样式、项目符号的处理。

CSS标记：一般放在<head>标记中。

提示：CSS是给HTML标记加的样式；JS是给HTML标记加行为的，先HTML标记才能使用CSS。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8“ />
<title> </title>
<style type="text/css">
h1{
    color:red;                /*文本颜色*/
    text-align:center;        /*对齐方式*/
    border:1px solid #444        /*边框样式*/
    background-color:#ffff00;    /*背景色*/
}
</style>
</head>
<body>
    <h1>层叠样式表</h1>
</body>
</html>

CSS语法格式

一个CSS规则，由“选择器”和“格式声明语句”构成。
“选择器”：就是选择HTML标记，给指定的HTML标记加样式。
“格式声明语句”：由{}构成，{}中是各种格式语句。
一条格式语句，必须用英文下的分号";"结束。
属性名，就是CSS中的各种属性，这些属性名都是固定的。
CSS中的数字单位都是px，这个px不能省略。

CSS选择器

1、基本选择器

（1）“*”选择器：通配符

描述：将匹配所有HTML标记，所有的标记都会改变。
语法：*{color:red;}
注意：“*”尽量少用，因为IE6不支持。

（2）标签选择器

描述：将匹配指定的HTML标记。
语法：如：p{color:green;}，上述代码，网页中所有的p标记颜色均会改变。
注意：CSS标签选择器，与HTML标记的名称一样，但不能加尖括号。

（3）class选择器（类选择器）——类选择器是使用频率最高的。

描述：给一类HTML标记加样式。这里所指的“一类”是：每个HTML标记都有一个class属性，且class的值一样。class属性是公共属性，每个HTML标记都有。
类选择器的名称：必须以“.”开头，后跟HTML标记的class属性的值。如：.box{color:red;}
HTML标记的class属性的值，不能以数字开头。
<style type="text/css">
.myType{
    color:red;
    background-color:yellow;
}
</style>

<h1 class="myType">CSS层叠样式表</h1>
<p class="myType">给一类HTML标记添加样式。</p>
（4）id选择器

描述：给指定id的元素添加样式。
注意：网页中HTML标记的id属性的值，必须是唯一的。
每一个HTML标记都有一个id公共属性。
注意：id属性一般是给JS使用的，不是用来加样式。class属性只能给CSS使用，不能给JS使用。
语法：#myId{ color:red; background-color:yellow; }
ID选择器的名称，必须以#号开头，后跟HTML标记的ID属性的值。

2、组合选择器

（1）多元素选择器

描述：给多个元素加同一个样式，多个选择器之间用逗号“,”隔开。

举例：h1,p,div,.myClass{ color:red;background-color:yellow;}

（2）后代元素选择器

描述：给某个标签的某一个后代元素加样式。选择器之间用“空格”隔开。

举例：

div .title{ color:red; }

div h1.title{ color:green; }

div p.title{ background-color:yellow; }

（3）子元素选择器

描述：给某个元素的子元素添加样式

举例：div>h1.title{ color:red; }