快速入门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.空格表示后代(儿子或孙子都行) 这里表示要满足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颜色设置

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

英⽂单词,如red,blue
rgb代码的颜⾊,如rgb(255,0,0)
⼗六进制的颜⾊如#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
        }