CSS基础学习（一）

一、CSS语法

• 每个CSS样式由两部分组成，即选择符和声明，声明又分为属性和属性值；
• 属性必须放在花括号中，属性与属性值用冒号连接；
• 每条声明用分号结束；
• 当一个属性有多个属性值的时候，属性值与属性值不分先后顺序，用空格隔开；
• 在书写样式过程中，空格、换行等操作不影响属性显示。

 基本结构：

要定义的对象{ 属性：属性值； 属性：属性值；}

 二、外部样式

CSS外部样式就是把CSS代码保存在一个单独的文件中，文件拓展名为.css，然后再HTML页面中引入这个CSS文件即可

链接式：

（1）<link rel="stylesheet"  type="text/css" href="css文件路径">

其中 rel="stylesheet" 是指在页面中使用这个外部样式表，type="text/css" 是指文件的类型是样式表文本， href 属性用于指定css文件的路径

导入式：

<style>

        @import url(css文件路径);

</style>

@import 表示导入文件，前面的 @ 符号必须写， url 中则是样式表文件的路径。 

 综上所述，连接式明显优于导入式，推荐平时使用连接式

 三、行内样式

在标签内部进行操作，如：

<h1 style="color:yellow">1111111111</h1>

 样式表优先级：  就近原则

  行内样式 > 内部样式 > 外部样式

最高级:  ! important 

四、选择器    

以下代码皆为演示代码，不可直接运行

• 元素选择器

<style>
        h1{
            color: blue !important;
        }
    </style>

类似于上代码，直接对标签元素进行操作 

•  类选择器（class）

<style>
        .ab{
            background-color: blue;
        }
        .cd{
            color: red;
            background-color: yellow;
        }
 </style>
<div class="ab cd">ab-1</div>
<div class="ab">cd-2</div>

 " . "是关键词,使用时不可或缺，class="  "也不可或缺

ps:浏览器上的文件都是边翻译边使用的，靠下的会覆盖靠上的，故ab-1会显示后者cd所代表的样式

• id选择器

<style>
    #a1{
        background-color: red;
    }
    #a2{
        background-color: blue;
    }
    #a3{
        background-color: yellow;
    }
 </style>
<div id="a1">1111111111</div>
<div id="a2">222222222</div>
<div id="a3">333333333</div>

” # “ 是关键词，id=" "也不要忘记哦

id选择器，具有唯一性，一个标签只能有一个id选择器，否则是违法的哦

• 通配符选择器

<style>
        *{
            /* 外边距 */
            margin: 0;
            padding: 0;
            /* 内边距 */
        }
</style>

不需要额外引用， margin(外边距) 、padding(内边距)  都是固定词组

• 群组选择器

  <style>
          div,.box,h1{
              background-color: yellow;
  </style>
  <div>11111111
               <p>111111111</p>
  </div>
         
  <p class="box">111111111</p>
  <h1>11111111</h1> -->

  提出公共代码，节约代码量，使用逗号来选择多个标签，class也可以被选择 

• 后代选择器（包含选择器）

 <style>
        div p{
            background-color: red;
        }
</style>
<div>11111111
             <p>111111111</p>
</div>

 

使用空格操作子标签，从右到左匹配

• 伪类选择器

<style>
        /* 初始状态 */
        a:link{
            color: yellow;
        }
        /* 访问之后 */
        a:visited{
            color: red;
        }
        /* 鼠标移上 */
        a:hover{
            color: orange;
        }
        /* 点击激活 */
        a:active{
            color: green;
        }
</style>
<a href="http://www.baidu.com">百度</a>

用于操作a标签 ，必须按照link(初始状态)->visited(访问之后)->hover(鼠标移上)->active(点击激活)的顺序来

• 选择器的权重

 

 

五、 文本属性

• 大小和字体

 font-size  用来描述字体大小，单位是px,浏览器默认是16px,设计图常用字号是12px

 font-family  用来描述字体，当字体是中文字体、英文字体中有空格时，需要加双引号；

                  多个字体中间用逗号链接 ,按顺序解析字体，若无可解析字体，则使用默认字体

 ps:谷歌浏览器默认微软雅黑字体，可使用字体：

• 字体颜色 

  rgb写法： color:rgb(red,green,blue)   范围是0-255  0最弱，255最强

十六进制写法：clour:#ffffff   由六个十六进制组成，前两位是红色，中间两位是绿色，最后两位是蓝色，在两个值是一样的情况下，可以两个省略为一个 #fff      取值范围（0-9 A-F）

• 加粗与倾斜 

 font-weight   加粗  取值范围为100-900。100 ligter（细体） 400 normal（正常） 700 bold（加粗） 900 bolder（更粗体）

font-style  斜体   italic（倾斜） oblique(更倾斜，强调) 

• 文本水平对齐与单行文本垂直居中

text-align  文本水平对齐  center、left、right、justify(两端对齐 ，只有在多行文本中有效果)

line-height  行高 如果line-height的数据=height的数据，可以实现单行文本垂直居中

ps：高度与宽度必须要带单位px

• 间距与首行缩进

letter-sapcing  字符间距（每一个汉字或者字母之间的间距）

word-spacing   词间距（控制每个单词之间的间距）

text-indent=2em   首行缩进(2em当前字体的两倍) 只对第一行起作用

&emsp;&emsp;  两个空格

• 文本修饰线

text-decoration  文本修饰  underline(下划线)  line-through(中划线)  overline(上划线)   none(常用于a标签中去除下划线)

• 搜索大小写

text-transform  控制文本大小写  capitalize(首字母大写)  lowercase(全部小写)   uppercase(全部大写)

 font 合并所有文本属性简写，是font-style font-weight font-size/line-height font-family的简写（顺序不能改变，必须同时指定font-size和font-family属性才起作用）