CSS基础语法

最新推荐文章于 2024-09-11 20:31:47 发布

小白孙在路上

最新推荐文章于 2024-09-11 20:31:47 发布

阅读量628

点赞数

文章标签： css html 前端 Powered by 金山文档

本文链接：https://blog.csdn.net/m0_72618437/article/details/129721548

版权

HTML只是表示页面的结构和内容-->骨

CSS描述额度是页面的样式-->皮

具体哦来说就是描述了任意一个网页的元素

大小/位置/字体/颜色/背景/边框

引入了CSS就是可以让一个页面变得美观

一.选择器

每一个CSS语句都包含了两个部分:选择器+应用的属性

p就是选择器.此处就表示选择页面中的所有p标签.

{}里面就是键值对结构,来表示css中的各种属性

键值对之间用;来分割,习惯每个键值对独占一行

建和值之间使用:来分割,习惯会在冒号后面价格空格

每个键值对就对应一个css属性

注意!

/**/是CSS中的注释,不支持//

二.CSS的引入方式

CSS代码可以放在HTML文件中(通常放到style标签里

通过style标签.可以放到html中的任意位置

1.内部样式表

通过style标签,来写css.只适用于简单的CSS

2内联样式

通过html标签中的style属性.来应用一些样式

这种内联样式,通常会搭配JS来使用

值适合样式特别简单的情况,只是针对当前元素生效,不需要写选择器哪些

3.外部样式

把css代码单独提取出来放入一个.css文件中.然后再html代码里,通过link标签.引入该css文件

这种方式可以让多个HTML复用同一份样式

这种link标签,一般习惯放到html的head标签里,这个标签可以存多份

通过多个link来引入不同的css

表示来源这个文件

4.css的优化

如果多了一些换行,虽然对于程序员友好,但是整体的cs文件会非常大

由于css文件都是通过网络传输给浏览器的,然后由浏览器来解析,如果CSS文件变大,就会更吃网络带宽影响效率,实际工作中,会打包

5.css的命名

java里用的是驼峰命名法

css里用的是脊柱命名法用-分割单词因为html和css不区分大小写

font_size 是蛇形命名法

三.选择器

选择器的功能就是选中页面的元素/标签

1.基础选择器

单个选择器构成的

1)标签选择器

写的选择器,就是一个html的标签名

也可以并集选择

2)类选择器

在css代码中,创建一个类名

在对应的html元素中,通过clss属性来引用这个类名,此时具有该类名的元素,就会应用相关的属性

3)id选择器

先给被选择的元素,设定个id属性,id在一个页面中是不能重读的,因此id选择器只能选中一个元素,不能选中多个

4)通配符选择器

直接选中了页面上的所有元素

这个最大的用途就是用来取消浏览器的默认样式

这就表示针对所有页面的html都应用上述样式

2.复合选择器

把多种基础选择器都综合运用起来

1)后代选择器

通过多个选择器的组合,能够选中某个元素的子/孙子元素(后代元素)

2)子选择器

通过多个选择器的组合,能够选中某个元素里面的子元素

选择器1>选择器2

第二个ui表示子代.第三个li是孙代

所以用子代显示器看不到

用后代选择器就看得到

三.文本属性

1.文本颜色 coler

1)直接用单词

2)用三原色 rgb

qq截图自带取色器,c复制得到

3)还是使用rgb.但是用十六进制表达式

4) 除了加上rgba 还可以加上alpha表示透明度

2.文本对齐

text-align

靠左

靠右

居中

3.设置下划线删除线缩进

css中表示尺寸的单位

1)px 像素

2)em 相对单位,表示当前元素文字大小

首行缩进当前文字大小的两个

4.行高

行高等于字体大小+行间距

设置行高的时候,其实会同时对上下两个方向产生影响.上下两个边距都是均等的

正因为行高是上下均等的,所以可以局域行高来实现垂直方向的文本居中

如果元素高度为150px 只需要给里面的文字设置行高为150px. 就可以达到文本垂直居中的效果

四.背景属性

1.设置背景颜色

background-color 具体用法和color类似

2.设置背景图片

3.设置背景图片的平铺效果

4.设置背景图的位置.background-position

5.设置背景图片的大小

通过px或者contain cover

6.圆角矩形

HTML里面的元素默认是矩形

css可以通过border-radius设置圆角效果

如果想要圆形,需要是正方形宽度的一半即可

length 是内切圆的半径. 数值越大, 弧线越强烈

五.盒子模型

块级元素:独占一行可以设置宽度高度 div h1-h6 ul li table

行内元素 : 不独占一行不能设置宽度高度 span a em i 理解成一个文本就可以,行内元素的尺寸取决于内部的内容

行内块元素:不独占一行.能够设置宽度高度

通过css中的display可以修改元素的显示模式

将行内元素改成块级元素

还可以用

none 不显示元素

1.盒子模型

HTML的元素其实是一个矩形

外边框:房子和房子之间的距离

边框:房子的墙

内边框:家具离墙的距离

家具就是内容

我们可以通过css的属性设置这几个方面的尺寸

1.外边距:margin

2.内边距 padding

3.边框 border

1).边框设置

实际开发中,我们会设置box-sizing属性为border-box 这个时候边框会挤压内容,而不是撑大元素

2) 内边框

padding 边框和内容之间的距离

3).margin

外边距会在垂直方向出现塌陷的情况.两个元素都设置外边距的时候,实际的外边距是两者的较大值,而不是相加,但是水平方向就会显示相加

五.弹性布局

弹性布局是安排页面上的元素排列

前面介绍的都是针对一个元素本身来设置的

div默认作为块级元素,是独占一行的,为了能让这些div能够在一个横行排列,就可以用弹性布局

给父元素设置一个属性.display:flex

案例-主页

根据这个来设置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人主页</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    .daohang{
        width: 100%;
        height: 50px;
        font-size: 20px;
        line-height: 50px;
        font-family: "宋体";
        text-align: center;

        background-color: aqua;
    }
    .center{
        width: 100%;
        height: 1200px;
        background-color: yellow;

        display: flex;
        justify-content:center;
        align-items: center;
    }
    .center .left,.center .right{
        width: 10%;
        height: 100%;
        background-color: red;
        font-size: 20px;
        line-height: 1000px;
        text-align: center;
        color:white
    }
    .center .contain{
        width: 80%;
        height: 100%;

        background-color: green;

        font-size: 20px;
        line-height: 1000px;
        text-align: center;
        color: white;
    }
    .foot{
        width: 100%;
        height: 100px;

        background-color: rebeccapurple;
        color: white;

        font-size: 20px;
        text-align: center;
        line-height: 100px;
    }
</style>
<body>
    <div class="daohang">
        导航栏
    </div>
    <div class="center">
        <div class="left">
            左侧边栏
        </div>
        <div class="right">
            右侧边栏
        </div>
        <div class="contain">
            内容区
        </div>
 
    </div>
    <div class="foot">
        页脚
    </div>
    
</body>
</html>