Meteoryh1111
Meteoryh1111

CSS学习笔记

学习网址:https://www.w3school.com.cn/
持续学习，持续更新
如有错误，欢迎指点

基础

一.简介

1.CSS 指层叠样式表 (Cascading Style Sheets)，样式定义如何显示 HTML 元素

二.基础语法

1 CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。

selector {
     declaration1; declaration2; ... declarationN }

2 每条声明由一个属性和一个值组成。

selector {
     property: value}

3 值的不同写法和单位
3.1 red的16进制

p {
      color: #ff0000; }

3.2 css缩写形式

p {
      color: #f00; }

3.3 rgb值

p {
      color: rgb(255,0,0); }
p {
      color: rgb(100%,0%,0%); }

4 如果值为若干单词，则要给值加引号

p {
     font-family: "sans serif";}

5 多重声明的可读性

p {
     
  text-align: center;
  color: black;
  font-family: arial;
}

6 选择器分组

h1,h2,h3,h4,h5,h6 {
     
  color: green;
  }

三.派生选择器

通过依据元素在其位置的上下文关系来定义样式，可以使标记更加简洁。

li strong {
     
    font-style: italic;
    font-weight: normal;
  }

我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用



    

  1. 我是斜体字。这是因为 strong 元素位于 li 元素内。
    2. 

  2. 我是正常的字体。
    3.

只有 li 元素中的 strong 元素的样式为斜体字，无需为 strong 元素定义特别的 class 或 id，代码更加简洁。

四.id选择器

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

#red {
     color:red;}
#green {
     color:green;}

<p id="red">这个段落是红色。p>
<p id="green">这个段落是绿色。p>

2.id 属性只能在每个 HTML 文档中出现一次。
3.在现代布局中，id 选择器常常用于建立派生选择器。

#sidebar p {
     
	font-style: italic;
	text-align: right;
	margin-top: 0.5em;
	}

五.类选择器

1.在 CSS 中，类选择器以一个点号显示。

.center {
     text-align: center

<h1 class="center">
This heading will be center-aligned
h1>

<p class="center">
This paragraph will also be center-aligned.
p>

2.类名的第一个字符不能使用数字
3.和 id 一样，class 也可被用作派生选择器

.fancy td {
     
	color: #f60;
	background: #666;
	}

4.元素也可以基于它们的类而被选择

td.fancy {
     
	color: #f60;
	background: #666;
	}

<td class="fancy">

六.插入样式表

1.外部样式表，独立里的css文件，用link链接到html里面。

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
head>

2.内部样式表，直接在html里面用