快速入门CSS

欢迎关注个人主页：逸狼

---

创造不易，可以点点赞吗

如有错误，欢迎指出~

目录

CSS

css的三种引入方式

css书写规范

选择器分类

标签选择器

class选择器

id选择器

复合选择器

通配符选择器

 color颜色设置 

border边框设置

width/heigth

内/外边距

---

---

CSS

CSS(Cascading Style Sheet),层叠样式表,⽤于控制⻚⾯的样式.CSS能够对⽹⻚中元素(页面上所有内容,称之为元素)位置的排版进⾏像素级精确控制,实现美化⻚⾯的效果.能够做到⻚⾯的样式和 结构分离.

选择器+{⼀条/N条声明}

选择器决定针对谁修改(找谁)

 声明决定修改啥.(⼲啥)

声明的属性是键值对.

使⽤;区分键值对,使⽤:区分键和值.

   <style>
        /* 选中所有的p标签 */
        p{
            /* 设置字体颜色 */
            color:red;
            /* 设置字体大小 */
            font-size:30px;
        }
    </style>

    <p>hello</p>
    <p>hello1</p>
    <p>hello2</p>
    你好

这里是选中了所有的p标签中的内容对其做了样式修改

• CSS要写到style标签中(后⾯还会介绍其他写法)
• style标签可以放到⻚⾯任意位置.⼀般放到head标签内.(因为HTML文件是从上往下加载,先加载CSS,方便用户使用)
• CSS使⽤/**/作为注释.(使⽤ctrl+/快速切换)

css的三种引入方式

css符合"就近原则"(元素离最近的css先生效)

• 内部样式会出现⼤量的代码冗余,不⽅便后期的维护，所以不常⽤.
• ⾏内样式,只适合于写简单样式.只针对某个标签⽣效.缺点是不能写太复杂的样式.
• 外部样式，html和css实现了完全的分离,企业开发常⽤⽅式.

css书写规范

• css 不区分大小写,但是开发时统一使用小写字母
• 冒号后⾯带空格  
• 选择器和{之间也有⼀个空格

选择器分类

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

'注意:class可以被多个元素使用,id只能被一个元素使用(class可以重复,id不能重复)

• 标签选择器

标签名{} 根据标签选择元素

/* 选择所有的a标签, 设置颜⾊为红⾊ */ 
a {
 color: red;
}
/* 选择所有的div标签, 设置颜⾊为绿⾊ */ 
div {
 color: green;
}

• class选择器

.类名{}  根据类选择元素

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

    <p class="red">hello</p>
    <p class="green">hello2</p>
    <p class="blue">hello3</p>
    <span class="red">我是一个span</span>
    <div class="green">我是一个div</div>

• id选择器

#id{}  根据id选中元素

/* 选择id为submit的元素, 设置颜⾊为红⾊ */ 
#submit {
 color: red;
}

• 复合选择器

标签名.类{}  多个单选择器的组合

1. 空格 表示后代
2. 没空格 表示交集
3. 逗号 表示并集
4. > 表示相邻后代 

        /* 1.空格表示后代(儿子或孙子都行) 这里表示要满足ul里中找到li,将li设置为红色 */
        ul li{
            color:red;
        }

        /* 2.没空格 表示交集 这里表示p标签和red类都要满足的设置为 红色*/
        p.red {
            color: red;
        }
        /* 3.逗号表示并集 这里表示red类和green类字体都设为 40px  */
        .red, .green{
            font-size: 40px;
        }
        /*4. >表示相邻后代"只能是父子辈(相隔一代)"不能是爷孙辈  */
        ul>li>a{  /*这里表示ul里的li,li中的a标签生效*/
            color: brown;
        }

• 通配符选择器

通配符{}

/* 设置⻚⾯所有元素, 颜⾊为红⾊*/ 
* {
 color: red;
}

 color颜色设置 

颜⾊有如下⼏种表达⽅式:

1. 英⽂单词,如red,blue
2. rgb代码的颜⾊,如rgb(255,0,0)
3. ⼗六进制的颜⾊如#ff00ff(相同的两个值可以简写为一个,这里可以简写为#f0f)

border边框设置

边框是⼀个复合属性,可以同时设置多个样式,不分前后顺序,浏览器会根据设置的值⾃动判断

.text1{
 border: 1px solid purple;
}

 这里表示选择text1标签设置宽度为1像素,样式为实线的紫色边框

border-width宽度设置,取值顺序

• 一个值=> 上下左右取值相同
• 两个值 =>上下  左右  
• 三个值=>上 左右 下
• 四个值=> 上 右 下 左(顺时针)

width/heigth

width设置宽度,heigth设置高度

只有块级元素可以设置宽高,块级元素独占一行,行内元素不独占一行

常见块级元素:h1-h6,p,div等

常见行内元素:a span

可以将行内元素改成块级元素

使⽤display属性可以修改元素的显⽰模式.

• display: block 改成块级元素[常⽤]
• display: inline 改成⾏内元素[很少⽤]

 /* 将span改为 块级元素 */
        span{
            display: block;
        }

内/外边距

内边距和外边距是相对的概念

确定一个边框为参考边框

• 边框与内容之间的距离是内边距padding
• 边框与边框之间的距离是外边距margin

当两个元素(相邻)设置边距的值不一致时,取较大的值

    <style>
        div {
            border: 1px solid red;
            padding: 20px;
            margin: 40px;
        }
    </style>

/* 以整个页面的边框为参考边框 ,内边距为100px*/
        html{
            padding:100px
        }