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

来源：互联网发布：ubuntu 进入boot 编辑：程序博客网时间：2024/05/18 00:57

一.介绍及语法

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.要让“哈哈”是红色

html文件：<p class="pclass">呵呵<a>哈哈</a></p>

css文件：.pclass a { color:red;}

class和id的区别：

①id是唯一的，class是可重复的

②从资源加载上看，id是先加载结构内容，再加载样式，而class则反之

③id一般用于框架的设计上，而class用于具体内部的构造

五.属性选择器

eg.head中：<style type="text/css"> [title]{color:blue;} [title=te]{color:red;} </style>

body中：<p title="t">属性选择器</p>

<p title="te">属性和值选择器</p>

0 0