前端学习笔记（二）CSS（选择器、文本属性、显示模式）

CSS（层叠样式表）

是一种 样式表 语言，用来描述 HTML 文档的呈现。

CSS选择器

CSS选择器是CSS规则的第一部分。它是元素和其他部分组合起来告诉浏览器哪个HTML元素应当是被选为应用规则中的CSS属性值的方式。选择器所选择的元素，叫做“选择器的对象”。

标签选择器

语法格式

<style>
    标签名{
            属性:属性值；
            属性:属性值;
            }
</style>

标签选择器主要针对的是页面中某个标签中的样式设置，它的作用范围是这个页面内所有写在该标签内的内容，标签选择器可以定义多个标签的样式

类选择器（最常用）

语法格式

<style type="text/css">
.类名{
       属性:属性值;
       属性:属性值;
}
</style>

类选择器同样写于style标签内，但类选择器在定义的时候需要 "." 来做前缀，类名是自定义的，然后在括号内定义属性和属性值。它不是直接作用在该页面中，而是需要使用class方法去自定义要作用的标签

一个标签可以拥有多个类名

ID选择器

语法格式

<style type="text/css">
#标识名{
        属性:属性值;
        属性:属性值;
        }
</style>

一般在js中使用，只能调用一次

通配符选择器

语法格式

<style type="text/css">
      * {
        属性:属性值;
        属性:属性值;
        }
</style>

给所有标签统一修改

字体专栏

字体

font-family：字体

字体大小

font-size：n px

字体粗细

font-weight：normal（默认）、bold（加粗）、bolder（特粗）、lighter（细） 

                        400                       700                                                                                                 

字体样式

font-style：normal、italic（斜体）

复合属性

font：font-style font-weight font-size/line-height font-family

文本属性

颜色

color：颜色

对齐方式

text-align：left/right/center

装饰文本

text-decoration：none（无）

                           underline（下划线）

                            overline（上划线）

                           line-through（删除线）

文本缩进

text-indent：n px

                     n em   

行间距

line-height：n px

上间距+下间距+文字高度=行间距

css的三种引入方式

1.内部样式表

将所有的css代码放在<style>里

  <style>
        body {
            font-size: 16px;
        }
  </style>

2.行内样式表

直接在标签内部书写html，style作为标签属性，不推荐大量使用

     <div style="color: red;">

     </div>

3.外部样式表

将样式单独写到css文件中，之后引入到html文档

<link rel="stylesheet" href="style.css">

复合选择器

子元素选择器

后代选择器又称为包含选择器，可以选择父元素里面的子元素

 <style>
        ol li a {
            color: red;
        }
</style>

后代选择器

子元素选择器只能选择作为某元素的最近一级子元素，简单理解就是选亲儿子元素

    <style>
        .nav>a {
            color: red;
        }
    </style>

并集选择器

并集选择器可以选择多组标签，同时为他们定义相同的样式。通常用于集体声明。

任何形式的选择器都可以作为并集选择器的一部分

    <style>
        div,
        p,
        .pig li {
            color: pink;
        }
    </style>

4.伪类选择器

伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第一个，第n个元素。

a：link       选择所有未被访问的链接

a：visited 选择所有已被访问的链接

a：hover 选择鼠标指针位于其上的链接

a：active 选择活动链接（鼠标按下未弹起的链接）

   <style>
        /* 1.未访问的链接 a:link  把没有点击过的(访问过的)链接选出来 */
        a:link {
            color: #333;
            text-decoration: none;
        }

        /*2. a:visited 选择点击过的(访问过的)链接 */
        a:visited {
            color: orange;
        }

        /*3. a:hover 选择鼠标经过的那个链接 */
        a:hover {
            color: skyblue;
        }

        /* 4. a:active 选择的是我们鼠标正在按下还没有弹起鼠标的那个链接 */
        a:active {
            color: green;
        }
    </style>

5.：focus伪类选择器

：focus伪类选择器用于选取获得焦点（光标）的表单元素

一般情况下<input>类表单元素才能获取，因此这个选择器也主要针对于表单元素

    <style>
        /* // 把获得光标的input表单元素选取出来 */
        input:focus {
            background-color: pink;
            color: red;
        }
    </style>

CSS 的元素显示模式

了解元素的显示模式可以更好的让我们布局页面.

1. 什么是元素的显示模式

作用：网页的标签非常修，在不同地方会用到不同类型的标签，了解他们的特点可以更好的布局我们的网页。

元素显示模式就是元素（标签）以什么方式进行显示，比如<div>自己占一行，比如一行可以放多个<span>

HTML元素一般分为块元素和行内元素两种类型。

2. 元素显示模式的分类

块元素

常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<i>等，其中<div>标签是最典型的块元素。
块级元素的特点：
①独占一行。
②高度，完度、外边距以及内边距都可以控制。
③宽度默认是容器（父级宽度）的100%。
④是一个容器及盒子，里面可以放行内或者块级元素。

注意：
• 文字类的元素内不能使用块级元素
• <p>标签主要用于存放文字，因此<p>里面不能放块级元素，特别是不能放<div>
• 同理，<h1>~<h6>等都是文字类块级标签，里面也不能放其他块级元素

行内元素

常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中
<spn>标签是最典型的行内元素。有的地方也将行内元素称为内联元素。
行内元素的特点：
①相邻行内元素在一行上，一行可以显示多个。
②高、宽直接设置是无效的
③默认宽度就是它本身内容的宽度。
④行内元素只能容纳文本或其他行内元素。
注意：
链接里面不能再放链接
特殊情况链接<>里面可以放块级元奈，但是给<ā>转换一下块级模式最安全

行内块元素

在行内元素中有几个特殊的标签
<img/>、<input/>、<td>,它们同时惧有块元素和行内元素的特点。
有些资料称它们为行内块元素。

行内块元素的特点：
①和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙。一行可以显示多个（行内元素特点）。
②默认完度就是它本身内容的宽度（行内元索特点）。
③高度，行高、外边距以及内边距都可以控制（块级元素特点）。

3. 元素显示模式的转换

转换为块元素：display.block
转换为行内元素：display:inline:
转换为行内块：display:inline-block,