CSS 基础知识

叁歲伎倆 2021-09-14 02:02 407阅读 0赞

#### 1.1 基本概念 ####

CSS是指层叠样式表（Cascading Style Sheets）。

为什么要使用CSS？

HTML描述了要呈现的内容，而CSS则定义了这些内容的呈现形式，比如字体、颜色等。使用CSS能够将页面内容和呈现形式有效分离，有利于分工合作。有利于快速变换不同的呈现形式。

在网页中使用CSS样式可以有三种方法：

（1）内联样式：将样式定义在标签内的style属性中，内容和表现形式高度耦合，维护困难，不利于分工合作，且该样式只应用于当前标签，故不提倡这种做法。样式以键值对的形式书写，以“；”结束。

<p style="color:red;">这是一个段落</p>

（2）内部样式：在网页中的<Head>标签中通过<style>标签来定义。内容和表现形式的耦合程度大大降低。这种方式只适用于网页内容比较简单，若网页内容繁杂，样式繁多就不适用了，且这种方式只能应用于当前页面。

<head>
       <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
       <title>表格.jpg的开发</title>
       <style>
          table{
             border-collapse: collapse;
             margin:50px auto;
             width:700px;
             font-size: 16px;
             box-shadow: 0 0 10px #aaa;
          }
       </style>
       <script></script>
    </head>

（3）外部样式：在网页外部定义一个CSS样式表文件，文件后缀名为“.css”，然后在网页<head>标签内通过<link>标签引进CSS外部样式表，<link>标签的形式为“<link rel="stylesheet" href="">”。“rel”属性不可缺省，“href”属性值是要引进的样式表的名称及对应的路径。请看代码示例：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
       <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
       <title>CSS</title>
       <link rel="stylesheet" href="css/mystyle.css">
       <style></style>
       <script></script>
    </head>
    <body>
    <p style="color:red;">这是一个段落</p>
    <p>这是另一个段落</p>
    </body>
    </html>

外部CSS样式：

p{
        font-size: 17px;
        color:pink;
    }
    body{
        background:#aaa;
    }

效果图：

![165029_OqvX_3598778.png][]

外部样式表使得内容和表现形式彻底分离，有利于分工合作及维护，可在多个HTML文件中引用。强力推荐在网页制作中使用外部样式表。

#### 1.2 颜色 ####

所有的颜色都可以由红色（red）、绿色（green）、蓝色（blue）三种颜色搭配而成，也就是人们常说的“三原色”。

在CSS中颜色的表示方法通常有四种：

（1）十六进制表示形式：\#aaaaaa（灰色）、\#ffffff（白色）、\#000000（黑色） 等等····

（2）RGBA（r,g,b,a）形式:以RGB整数设置颜色，A表示颜色的透明度，a的取值范围为“0~1”.“0”表示纯透明，“1”表示不透明。例 rgb(255,255,255),rgba(255,255,255,0.8).

（3）用颜色名表示 ：如white、red、greenyellow、gold等。

（4）以RGB百分数设置颜色：如 rgb(50%,20%,30%).

<body>
    <p style="color:#ff6a93;">这是一个段落</p>
    <p style="color:rgba(67,173,255,0.8);">这是一个段落</p>
    <p style="color:blue;">这是一个段落</p>
    <p style="rgb(80%,10%,10%)">这是一个段落</p>
    </body>

效果图：

![171524_pyZd_3598778.png][]

#### 1.3尺寸单位 ####

cm:厘米.

mm:毫米.

in：英寸.

px：像素.

%：百分比.

em、vw、vh 、rem.

#### 1.4 CSS基础属性 ####

表示方法 ：\{ 属性名：属性值 \}

例如：
    { background：#aaa;border:solid 1px #fff }

1.4.1 字体相关属性

（1）Font-family：规定字体名称。

（2）Font-size：规定字体大小。

（3）Font-style：规定字体的样式，如加粗、倾斜。

（4）@font-face：自定义一种字体，内容可包括字体名称、大小、颜色。

（5）font-weight：设置字体的权重。取值为“100~900”，或者“bold/bolder/inherit/normal/lighter”.

（6）字体属性也可以简写成一个属性Font：不过书写值有顺序，

例如：

p{
       font:18px 华文宋体；
    }
    /* 简写时候，字体大小必须写在字体名称前面，中间用空格隔开*/

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
       <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
       <title>font</title>
       <style>
          p{
             font-family: 华文宋体;
             font-size: 17px;
             font-style: italic;
          }
       </style>
       <script></script>
    </head>
    <body>
    <p>这是一个段落</p>
    </body>
    </html>

1.4.2 文本相关属性

文本相关属性主要包括文本颜色、对齐方式、修饰效果等。

（1）color：规定文本的颜色，取值为颜色值。

（2）text-decoration（文本修饰效果）：取值有 “none（无修饰效果）/underline（下划线）/overline（上划线）/line-through（删除线）”.

（3）text-shadow（文本阴影）：比如 \{  text-shadow：3px 5px \#aaaaaa（3px代表水平方向的偏移量，5px代表垂直方向的偏移量，最后一个代表阴影颜色） \}

（4）direction：规定文本方向，有两个取值 “rtl（从右往左）/ltr（从左往右）”。

（5）text-indent：规定文本首行缩进值。例如 text-indent：5px

（6）text-align：规定文本水平对齐方式，取值有 "left（左对齐）/right（右对齐）/center（居中）/justify（两端对齐）"。

（7）vertical-align（文本垂直对齐方式）：“ top（顶部对齐）/bottom（底端对齐）/middle（居中对齐）”

（8）letter-spacing：规定字符间距。

（9）word-spacing：规定文字间距。

（10）line-height：规定行高，实际上是调整行间距。

1.4.3 尺寸相关属性

（1）width：规定宽度值。

（2）height：规定高度值。

（3）max-width：规定最大宽度值。

（4）max-height：规定最大高度值。

（5）min-width：规定最小宽度值。

（6）min-height：规定最小高度值。

1.4.4 显示相关属性

（1）display：取值 ”none（不显示元素，但不占用原有空间）/block（显示为块级元素）“。

（2）visibility：取值为 ”hidden（隐藏元素，但还占用原有空间）/visible（元素为可见状态）“。

（3）display可将块级元素转化为内联元素，反之亦可以，取值以下：

block：将元素转化为块级元素。

inline-block：将元素转化为内联块级元素。

li{
             display: inline-block;
             line-height: 35px;
             background: #aaaaaa;
             width:95px;
             text-align: center;
             margin-left: -5px;
       }

1.4.5 盒子模型

margin：外边距。

与之相关的有：margin-top、margin-right、margin-bottom、margin-left。

使用方法：
    
    （1）{ margin：20px ; }  表示上右下左外边距都是20px
    
    （2）{ margin-left：10px; }  表示左外边距是10px
    
    （3）{ margin：20px 10px 15px 35px }  表示顺序分别是上右下左的外边距值

padding：内边距。

与之相关的有：padding-top、padding-right、padding-bottom、padding-left。

使用方法：
    
    （1）{ padding：20px ; }  表示上右下左内边距都是20px
    
    （2）{ padding-left：10px; }  表示左内边距是10px
    
    （3）{ padding：20px 10px 15px 35px }  表示顺序分别是上右下左的内边距值

border：设定元素的边框。

使用方法：
    
    <style>
         p{
            border:solid 1px #aaa;
          }
    </style>
    
    /* 注释：
    solid 规定边框的样式为实线，还可取值为 ”dashed（虚线）/dotted（圆点）/transparent（隐藏）/double（双线）“.
    1px   规定边框的粗细.
    #aaa  规定边框的颜色.
    */

outline: 设置元素周围的轮廓线。用法等同于border

[165029_OqvX_3598778.png]: https://static.oschina.net/uploads/space/2017/0711/165029_OqvX_3598778.png
[171524_pyZd_3598778.png]: https://static.oschina.net/uploads/space/2017/0711/171524_pyZd_3598778.png