CSS系统学习一（基础）

最新推荐文章于 2024-09-11 08:45:46 发布

会变强的小魔女

最新推荐文章于 2024-09-11 08:45:46 发布

阅读量756

点赞数

文章标签： css

本文链接：https://blog.csdn.net/CSDN_09/article/details/104495886

版权

学习内容来自w3school

一、CSS基础教程

简介

CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中

基础语法

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

选择器通常是您需要改变样式的 HTML 元素。每条声明由一个属性和一个值组成。
属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

selector {declaration1; declaration2; ... declarationN }
即 selector {property: value}

记得写引号
提示：如果值为若干单词，则要给值加引号 p {font-family: "sans serif";}

空格和大小写
CSS 对大小写不敏感。不过存在一个例外：如果涉及到与 HTML 文档一起工作的话，class 和 id 名称对大小写是敏感的。

CSS高级语法

选择器的分组
被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。如下对所有的标题元素进行了分组。所有的标题元素都是绿色的。

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

继承

根据 CSS，子元素从父元素继承属性。
通过 CSS 继承，子元素将继承最高级元素（在本例中是 body）所拥有的属性（这些子元素诸如 p, td, ul, ol, ul, li, dl, dt,和 dd）。不需要另外的规则，所有 body 的子元素都应该显示 Verdana 字体，子元素的子元素也一样。

body {
     font-family: Verdana, sans-serif;
     }

CSS 派生选择器

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

li strong {
    font-style: italic;
    font-weight: normal;
  }
  
<p><strong>我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用</strong></p>

<ol>
<li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li>
<li>我是正常的字体。</li>
</ol>

在这里插入图片描述

后代选择器（descendant selector）
又称为包含选择器。可以选择作为某元素后代的元素。举例来说，如果希望只对 h1 元素中的 em 元素应用样式，可以这样写：h1 em {color:red;}

子元素选择器（Child selectors）：只能选择作为某元素子元素的元素
例如，如果您希望选择只作为 h1 元素子元素的 strong 元素，可以这样写：h1 > strong {color:red;} 这个规则会把第一个 h1 下面的两个 strong 元素变为红色，但是第二个 h1 中的 strong 不受影响

子选择器使用了大于号（子结合符）
选择器 h1 > strong 可以解释为“选择作为 h1 元素子元素的所有 strong 元素”。

相邻兄弟选择器 Adjacent sibling selector）：可选择紧接在另一元素后的元素，且二者有相同父元素。 加号（+），即相邻兄弟结合符
例如，如果要增加紧接在 h1 元素后出现的段落的上边距，可以这样写：

h1 + p {margin-top:50px;}

这个选择器读作：“选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素”。

用一个结合符只能选择两个相邻兄弟中的第二个元素及其后的所有兄弟元素。

CSS id 选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
id 选择器以 # 号来定义。
id 属性只能在每个 HTML 文档中出现一次。即不能重名
id 选择器常常用于建立派生选择器，也可以做单独的选择器。

详解

ID 选择器允许以一种独立于文档元素的方式来指定样式。
区分大小写，类选择器和 ID 选择器可能是区分大小写的。

CSS 类选择器

类选择器以一个点号显示：.center {text-align: center}

类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。
和 id 一样，class 也可被用作派生选择器

例：类名为 fancy 的更大的元素内部的表格单元都会以灰色背景显示橙色文字。（名为 fancy 的更大的元素可能是一个表格或者一个 div）

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

详解

类选择器允许以一种独立于文档元素的方式来指定样式。
类选择器可以结合元素选择器来使用。
例: 希望只有段落显示为红色文本：p.important {color:red;} p.important 解释为：“其 class 属性值为 important 的所有段落, 选择器现在会匹配 class 属性包含 important 的所有 p 元素

css 多类选择器
一个 class 值中可能包含一个词列表，各个词之间用空格分隔。例如，

<p class="important warning">
This paragraph is a very important warning.
</p>

我们假设 class 为 important 的所有元素都是粗体，而 class 为 warning 的所有元素为斜体，class 中同时包含 important 和 warning 的所有元素还有一个银色的背景。就可以写作：

.important {font-weight:bold;}
.warning {font-style:italic;}
.important.warning {background:silver;}

通过把两个类选择器链接在一起，仅可以选择同时包含这些类名的元素（类名的顺序不限）

CSS 属性选择器

可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性。符号为**[ ]**

例：为带有 title 属性的所有元素设置样式：

[title]
{
color:red;
}

属性和值选择器

[title=W3School]

属性和值选择器 - 多个值 [title~=hello] { color:red; }，在< h2 title=“hello world”>Hello world< /h2> 时可以产生效果

为带有包含指定值的 lang 属性的所有元素设置样式。适用于由连字符分隔的属性值：

[lang|=en] { color:red; }

设置表单的样式

input[type="text"]
{
  width:150px;
  display:block;
  margin-bottom:10px;
  background-color:yellow;
  font-family: Verdana, Arial;
}

对以下有用：

<form name="input" action="" method="get">
<input type="text" name="Name" value="Bill" size="20">
<input type="text" name="Name" value="Gates" size="20">
<input type="button" value="Example Button">

</form>

产生效果：
在这里插入图片描述

CSS 创建

外部样式表

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

内部样式表
在这里插入图片描述

内联样式
在这里插入图片描述 多重样式
如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。

二、CSS 样式

css 背景

背景色

background-color 属性

背景图像

background-image 属性
元素的背景占据了元素的全部尺寸，包括内边距和边框，但不包括外边距。默认地，背景图像位于元素的左上角，并在水平和垂直方向上重复。
background-image 也不能继承。事实上，所有背景属性都不能继承。

  body {background-image: url("新叶.jpg");}

背景重复

background-repeat 属性
图像可以无限平铺、沿着某个轴（x 轴或 y 轴）平铺，或者根本不平铺。
背景定位
初始背景图像（原图像）根据 background-position 属性的值放置。
例：需要把 background-attachment 属性设置为 “fixed”，才能保证该属性在 Firefox 和 Opera 中正常工作。

body
{ 
background-image:url('bgimage.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}

位置关键字可以按任何顺序出现，只要保证不超过两个关键字 - 一个对应水平方向，另一个对应垂直方向。
背景关联
background-attachment 属性，可以声明图像相对于可视区是固定的（fixed），因此不会受到滚动的影响。默认值是滚动。
如果文档比较长，那么当文档向下滚动时，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失。

CSS 文本

在这里插入图片描述 缩进文本

text-indent 属性规定文本块（段落）中首行文本的缩进。
用于定义块级元素中第一个内容行的缩进。这最常用于建立一个“标签页”效果。p {text-indent: 5em;}
可以为所有块级元素应用 text-indent，但无法将该属性应用于行内元素，图像之类的替换元素上也无法应用 text-indent 属性。
使用百分比值：百分数要相对于缩进元素父元素的宽度。换句话说，如果将缩进值设置为 20%，所影响元素的第一行会缩进其父元素宽度的 20%。

水平对齐
text-align 属性规定元素中的文本的水平对齐方式。

h1 {text-align:center}
h2 {text-align:left}
h3 {text-align:right}

属性值 justify 实现两端对齐文本效果。文本行的左右两端都放在父元素的内边界上。
text-align:center 与 < CENTER> 元素的区别：< CENTER> 不仅影响文本，还会把整个元素居中。text-align 不会控制元素的对齐，而只影响内部内容。元素本身不会从一端移到另一端，只是其中的文本受影响。

字间隔
word-spacing 属性可以改变字（单词）之间的标准间隔。其默认值 normal 与设置值为 0 是一样的。p { word-spacing:25px; }

字母间隔 letter-spacing 属性
letter-spacing 属性的可取值包括所有长度。默认关键字是 normal h1 {letter-spacing: -0.5em}

字符转换 text-transform 属性
处理文本的大小写。这个属性有 4 个值：

none uppercase lowercase capitalize
默认值 none 对文本不做任何改动，将使用源文档中的原有大小写。uppercase 和 lowercase 将文本转换为全大写和全小写字符。capitalize 只对每个单词的首字母大写。

文本装饰 text-decoration 属性
有 5 个值：

none underline overline line-through blink
underline 会对元素加下划线，就像 HTML 中的 U 元素一样。overline 的作用恰好相反，会在文本的顶端画一个上划线。值 line-through 则在文本中间画一个贯穿线，等价于 HTML 中的 S 和 strike 元素。blink 会让文本闪烁
去掉链接的下划线 a {text-decoration: none;}
如果两个不同的装饰都与同一元素匹配， text-decoration 值会替换而不是累积起来。

处理空白符 white-space 属性
影响到用户代理对源文档中的空格、换行和 tab 字符的处理。
p {white-space: normal;}显式地设置这种默认行为，把所有空白符合并为一个空格。

值 pre: 空白符不会被忽略。
-值 nowrap，它会禁止元素中的文本换行，除非使用了一个 br 元素。

文本方向 direction 属性
有两个值 ltr 和 rtl。大多数情况下，默认值是 ltr，显示从左到右的文本。

CSS 字体

建议在所有 font-family 规则中都提供一个通用字体系列。这样就提供了一条后路，在用户代理无法提供与规则匹配的特定字体时，就可以选择一个候选字体。

如果您对字体非常熟悉，也可以为给定的元素指定一系列类似的字体。要做到这一点，需要把这些字体按照优先顺序排列，然后用逗号进行连接

font-style 属性最常用于规定斜体文本
如果您没有规定字体大小，普通文本（比如段落）的默认大小是 16 像素 (16px=1em)
1em 等于当前的字体尺寸。如果一个元素的 font-size 为 16 像素，那么对于该元素，1em 就等于 16 像素。在设置字体大小时，em 的值会相对于父元素的字体大小改变。公式将像素转换为 em：pixels/16=em

在这里插入图片描述