CSS的介绍 - 技术栈

CSS,层叠样式表,用于控制页面的样式.CSS能够对网页中元素的位置进行像素级精确控制,实现美化页面的效果,能够做到页面的样式和结构分离.

CSS的基本语法规则:选择器+{N条声明}

选择器决定修改谁,声明表示修改的内容.声明的属性是键值对.CSS有三种引入方式,行内样式,内部样式,外部样式.为了方便介绍,接下来主要使用内部样式.在介绍之前,CSS有一些书写规范需要介绍:统一使用小写字母,冒号后面需要带有空格,选择器和{之间也需要带有空格.

CSS选择器:CSS选择器的主要功能就是选中页面指定的标签元素,选中了元素,才可以设置元素的属性.

复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>页面</title>
</head>
<body>
    <div class="font1"> 这是一个div,class为font1</div>
    <div class="font1"> 这是一个div,class为font1</div>
    <div><a href="#">这是一个div</a></div>
    <ul>
        <li>t1</li>
        <li>t2</li>
        <li><a href="#">t3</a></li>
    </ul>
    <ol>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ol>
    <button id="提交">提交</button>
</body>
</html>

原始的页面如下:

CSS选择器主要分下面几种:

1.标签选择器,针对标签进行选择

比如选择所有的<li>标签设置成绿色,选择所有的<div>标签设置成红色.

复制代码

<style>
        li {

            color: green;
        }
        div {
            color: red;
        }
    </style>

发现有两个超链接没有按照预期进行变色,原意是CSS中的就近原则,要想使超链接的字变色,需要使用a标签进行设置.

复制代码

 <style>
        li {

            color: green;
        }
        div {
            color: red;
        }
        a {
            color: rebeccapurple;
        }
    </style>

2.类选择器,对每一个标签都可以设置类名,然后通过类名来选择不同的标签.上面的代码设置了类名font1,因此可以通过类选择器来选中标签进行设置.需要注意的是,类选择器的用法式 .+类名

复制代码

 <style>
        .font1 {
            color: red;
        }
        .t222 {
            color: green;
        }
        .t231 {
            color: pink;
        }
    </style>

3.ID选择器,通过标签的ID来选中标签,要注意在ID之前要加一个#

复制代码

 <style>
        #t9 {
            color: aqua;
        }
        #提交 {
            color: white;
        }
    </style>

4.通配符选择器,即选中页面内的所有元素*

复制代码

 <style>
       * {
        color: pink;
       }
    </style>

5.复合选择器

复制代码

 <style>
      ul li a {
        color: white;
       }
    </style>

以上三个标签选择器中的任意,都可以替换成类选择器,或者id选择器,可以是任意选择器的组合,也可以是任意数量选择器的组合.不一定是父子标签,也可以是孙子标签.如果需要选择多种标签,可以使用,分隔表示同时选中,两侧的标签.

常用CSS

1.font-size:设置字体的大小.

复制代码

 <style>
      .font1 {
        font-size: 90px;
      }
    </style>

2.border:边框,border-width 设置边框粗细 border-style 设置边框样式 border-color 设置边框颜色.

复制代码

  <style>
      table {
         border-width: 3px;
         border-color: pink;
         border-style: dashed;
      }
    </style>

3.width/heirht

width设置宽度,height设置高度.只有块级元素才可以设置宽度和高度.常见的块级元素:h1-h6,p,div

复制代码

<style>
      table {
         border-width: 3px;
         border-color: pink;
         border-style: dashed;
         width: 300px;
         height: 300px;
      }
    </style>