CSS学习小结Day_01

css笔记

一、字体设置

大小设置 font-size：(px - 像素) （em）（%）

字体设置 font-family：(serif) (sans-serif) (楷体) （Times New Roman）

斜体设置 font-style：(normal - 正常) （italic - 斜体）（oblique - 倾斜）

粗体设置 font-weight：（normal）(bold) (100-900) 400正常 700blod

简明设置 font：（斜体）（粗体）（大小）（字体）

以上顺序固定，斜体，粗体可以省略不写，但大小和字体参数必须有。

p.a {
  font: 20px Arial, sans-serif;
}

p.b {
  font: italic small-caps bold 12px/30px Georgia, serif;
}

二、选择器（▲）

1、标签选择器（元素选择器）

元素选择器根据元素名称来选择 HTML 元素。

作用：快速为同类型标签使用统一样式。

eg：p { text-align: center; color: red; }

页面上的所有<p>元素都将居中对齐，并带有红色文本颜色

2、类选择器

类选择器选择有特定 class 属性的 HTML 元素。

如需选择拥有特定 class 的元素，请写一个句点（.）字符，后面跟类名。

eg:.center { text-align: center; color: red; }

带有 class=“center” 的 HTML 元素将为红色且居中对齐

3、多类名选择器

HTML 元素也可以引用多个类。

eg:<p class="center large">这个段落引用两个类。</p>

元素将根据 class="center" 和 class="large" 进行样式设置

4、id选择器

id 选择器使用 HTML 元素的 id 属性来选择特定元素。

元素的 id 在页面中是唯一的，因此 id 选择器用于选择一个唯一的元素！

要选择具有特定 id 的元素，请写一个井号（＃），后跟该元素的 id。

eg：#para1 { text-align: center; color: red; }

规则将应用于 id=“para1” 的 HTML 元素
id 名称不能以数字开头。

5、通配符选择器

通用选择器（*）选择页面上的所有的 HTML 元素。

eg:* { text-align: center; color: blue; }

会影响页面上的每个 HTML 元素

6、分组选择器

将具有相同样式定义的 HTML 元素选择，一并定义类型
eg：

h1 {
  text-align: center;
  color: red;
}

h2 {
  text-align: center;
  color: red;
}

p {
  text-align: center;
  color: red;
}

合并为

h1, h2, p {
  text-align: center;
  color: red;
}

最好对选择器进行分组，以最大程度地缩减代码, 用逗号来分隔每个选择器。

7、属性选择器

CSS 2 引入了属性选择器，属性选择器可以根据元素的属性及属性值来选择元素。

1）简单属性选择

选择有某个属性的元素，而不论属性值是什么，可以使用简单属性选择器。

eg1：*[title] {color:red;}

把包含标题（title）的所有元素变为红色

eg2：a[href] {color:red;}

只对有 href 属性的锚（a 元素）应用样式

eg3：a[href][title] {color:red;}

根据多个属性进行选择，只需将属性选择器链接在一起即可

2）根据具体属性值选择

除了选择拥有某些属性的元素，还可以进一步缩小选择范围，只选择有特定属性值的元素。

eg：a[href="http://www.baidu.com"] {color: red;}

指向 Web 服务器上某个指定文档的超链接变成红色

• 格式要求必须与属性值完全匹配

3）根据部分属性值选择

根据属性值中的词列表的某个词进行选择，则需要使用波浪号（~）

eg：p[class~="important"] {color: red;}

选择class 属性中包含 important 的元素

8、后代选择器（包含选择器）

后代选择器（descendant selector）又称为包含选择器。
后代选择器可以选择作为某元素后代的元素。空格分隔的选择器

eg:h1 em {color:red;}

只对 h1 元素中的 em 元素应用样式

ul em，这个语法就会选择从 ul 元素继承的所有 em 元素，而不论 em 的嵌套层次多深。因此，ul em 将会选择以下标记中的所有 em 元素：

<ul>
  <li>List item 1
    <ol>
      <li>List item 1-1</li>
      <li>List item 1-2</li>
      <li>List item 1-3
        <ol>
          <li>List item 1-3-1</li>
          <li>List item <em>1-3-2</em></li>
          <li>List item 1-3-3</li>
        </ol>
      </li>
      <li>List item 1-4</li>
    </ol>
  </li>
  <li>List item 2</li>
  <li>List item 3</li>
</ul>

9、子元素选择器

与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。

使用了大于号 >（子结合符）子结合符两边可以有空白符

eg：h1 > strong {color:red;}

选择只作为 h1 元素子元素的 strong 元素
这个规则会把第一个 h1 下面的两个 strong 元素变为红色，但是第二个 h1 中的 strong 不受影响：

<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>

10、伪类选择器

1）、所有 CSS 伪类


2）、所有 CSS 伪元素

三、文本

1、文本颜色

color 属性用于设置文本的颜色。颜色由以下值指定：

颜色名 - 比如 “red”
十六进制值 - 比如 “#ff0000”
RGB 值 - 比如 “rgb(255,0,0)”

2、文本间距

文字缩进
text-indent 属性用于指定文本第一行的缩进：

实例

p {
  text-indent: 50px;
}

字母间距
letter-spacing 属性用于指定文本中字符之间的间距。

下例演示如何增加或减少字符之间的间距：

实例

h1 {
  letter-spacing: 3px;
}

h2 {
  letter-spacing: -3px;
}

行高
line-height 属性用于指定行之间的间距：

实例

p.small {
  line-height: 0.8;
}

p.big {
  line-height: 1.8;
}

字间距
word-spacing 属性用于指定文本中单词之间的间距。

下例演示如何增加或减少单词之间的间距：

实例

h1 {
  word-spacing: 10px;
}

h2 {
  word-spacing: -5px;
}

空白
white-space 属性指定元素内部空白的处理方式。

此例演示如何禁用元素内的文本换行：

实例

p {
  white-space: nowrap;
}

四、Display属性

控制布局的最重要的 CSS 属性。

display 属性规定是否/如何显示元素。

每个 HTML 元素都有一个默认的 display 值，具体取决于它的元素类型。大多数元素的默认 display 值为 block 或 inline。

块级元素（block element）

块级元素总是从新行开始，并占据可用的全部宽度（尽可能向左和向右伸展）。

这个 <div> 元素属于块级元素。
块级元素的一些例子：

<div>
<h1> - <h6>
<p>
<form>
<header>
<footer>
<section>

行内元素（inline element）

内联元素不从新行开始，仅占用所需的宽度。

这是段落中的行内 <span> 元素。

行内元素的一些例子：

<span>
<a>
<img>