简单使用CSS

最新推荐文章于 2023-10-23 22:13:34 发布

zyz04

最新推荐文章于 2023-10-23 22:13:34 发布

阅读量121

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/zyz04/article/details/133854300

版权

层叠样式表：

CSS的引入方式：

1.内部样式：直接把CSS嵌入到HTML中，放到style标签里

2.外部样式：把CSS写成一个单独的.css文件，由html通过link标签引入过来

3.内联样式：直接把CSS属性写到元素的style属性内

层叠样式表：

CSS的主要作用是使网页变得好看

比如颜色是一个样式，大小又是一个样式，所有的样式叠加起来就能使网页变得好看，这称作CSS样式表

CSS的引入方式：

1.内部样式：直接把CSS嵌入到HTML中，放到style标签里

(style标签可以放到任意位置，但习惯上最好放到head标签内)

2.外部样式：把CSS写成一个单独的.css文件，由html通过link标签引入过来

3.内联样式：直接把CSS属性写到元素的style属性内

(如果同时使用了多种样式，内联样式的优先级最高)

选择器：

CSS里的选择器由很多中，但这里只对CSS简单了解，所以不多介绍

标签选择器：

类选择器：

这里的类名是一套新的概念，和java内的类不一样

针对于优先级，有一套专门的公式来计算优先级数值

但这里只针对CSS略有了解即可，所以不介绍了

一个元素也可以具有多种类，每个类之间用空格作为分割：

id选择器：

使用#作为开头

后代选择器：

CSS常见属性：

CSS 参考手册 (w3school.com.cn)

与字体有关：

font-size	用于设置字体的大小
font-family	用于设置字体类型
font-weight	用于设置字体粗细
font-style	用于设置字体是否倾斜

 div h3{
        /* 字体大小 */
        font-size: 50px;
        /* 字体家族 */
        font-family: "微软雅黑";
        /* 字体粗细 范围100~900 */
        font-weight: 100;
        /* 字体倾斜 */
        font-style: italic;
    }

文本有关：

color	设置文本颜色，除了通过名字设置常见的色号，也可以通过rgb(xxx,xxx,xxx)设置复杂的颜色
text-align	设置文本位置，左 left 中 center 右 right
text-indent	设置首行缩进，单位px
text-decoration	用于添加文本装饰，比如下划线，波浪线等等，也可以用于修改装饰颜色等,其中典型的取值是none，常用于去除a标签的下划线
line-height	设置行间距，单位px

 .demo1{
        /* 文本颜色 */
        color: red;
        /* 文本位置 */
        text-align: center;
        /* 首行缩进 */
        text-indent: 30px;
        /* 用于添加文本装饰，比如下划线，波浪线等等，也可以用于修改装饰颜色 */
        text-decoration: underline;
        /* 设置行间距 */
        line-height: 100px;
    }

背景有关：

width	设置背景宽度，相当于横坐标
height	设置背景高度，相当于纵坐标
background-color	设置背景颜色
background-image	设置背景图片
background-repeat	设置图片是否平铺，当图片大小小于背景大小时，默认采取平铺图片
background-position	设置图片位置，以左下角为远点，第一个为x,第二个为y单位px
background-size	设置图片大小，如果只有一个数，则等比例伸缩，两个数则强制拉伸

.demo2{
        /* 设置背景宽度，相当于横坐标 */
        width: 1000px;
        /* 设置背景高度，相当于纵坐标 */
        height: 500px;
        /* 设置背景颜色 */
        background-color: gray;
        /* 设置背景图片 */
        background-image: url(dog.png);
        /* 禁止图片平铺，当图片大小小于背景大小时，默认采取平铺图片 */
        background-repeat: no-repeat;
        /* 设置图片位置，以左下角为远点，第一个为x,第二个为y单位px */
        background-position: center center;
        /* 设置图片大小，如果只有一个数，则等比例伸缩，两个数则强制拉伸 */
        background-size: 500px;
    }

设置圆角矩形：

border-radius

单位px 代表内切圆的半径大小，半径越大，圆弧越大

如：

 .demo3{
        border-radius: 250px;
        font-size: 80px;
        text-align: center;
        width: 500px;
        height: 500px;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 600px;
        background-image: url(dog.png);
    }

显示模式display：

显示模式主要与display这个属性有关，其中最主要的有三种显示模式：

1.display：block;块级元素，独占一行，如h1~h6,p,div,ul,li,table....

2.display：inline;行内元素，不独占一行，如span a,b

3.display：none;隐藏元素

块级元素和行内元素的区别有很多，其中最主要的就是块级元素可以设置尺存，行内元素不能

我们通常会把行内元素修改为块级元素，一般不会将块级元素修改为行内元素

CSS盒子模型：

边框属性：

更详细的边框属性可以参考CSS 参考手册 (w3school.com.cn)

 *{
        /* 由于边框的像素大小会影响总大小 */
        /* 有时候我们想让width,height决定盒子的总大小 */
        /* 可以使用box-sizing来设置为border-box让边框不影响盒子总大小 */
        box-sizing: border-box;
    }
    .demo4{
        width: 500px;
        height: 500px;
        /* 设置边框可以四条边框一起设置，三个参数分别是颜色，宽度，风格 */
        border: green 20px solid;
        /* 四条边也可以分别设置 */
        border-top: red 20px solid;
        border-radius: 20px;
    }

内边距属性：

内边距(padding)就是内容与边框之间的距离

 .demo5{
        width: 500px;
        height: 500px;
        border: black 10px solid;
        /* 这种写法是四个内边距一起设置 */
        /* padding: 30px; */
        /* 这种写法是上下30px,左右20px */
        /* padding: 30px 20px; */
        /* 这种写法是按照上右下左顺时针的方式设置边内距 */
        /* padding: 30px 20px 10px 40px */
        /* 也可以单独对其中一条内边距进行设置 */
        /* padding-left: 20px; */

    }

外边距属性：

margin的使用方法和padding使用方法是类似的

.demo6{
        width: 500px;
        height: 500px;
        border: black 10px solid;
        background-color: gray;
        /* 这种写法是四个外边距一起设置 */
        /* margin: 30px; */
        /* 这种写法是上下30px,左右20px */
        /* margin: 30px 20px; */
        /* 这种写法是按照上右下左顺时针的方式设置边内距 */
        /* margin: 30px 20px 10px 40px */
        /* 也可以单独对其中一条外边距进行设置 */
        /* margin-left: 30px; */
        /* 当左右外边距同时为auto的时候能实现水平居中效果 */
        /* 但是上下外边距同时为auto时并不能实现水平居中 */
        margin-left: auto;
        margin-right: auto;
    }

弹性布局：

有时候我们需要让块级元素实现水平排列，比如：

这时候就需要使用到弹性布局，其中最主要的有三种相关属性：

1.display:flex;用于开启弹性布局(flex就是弹性布局)，某个元素一旦开启弹性布局，其内部子元素就会按照水平方向排列，但子元素内部的子元素是不受影响的

2.justify-content: 设置水平方向的排列规则，居中排列，靠左，靠右，分散开。。

3.align-items:设置垂直方向的排列规则

   .demo7{
        margin-left: auto;
        margin-right: auto;
        /* 开启弹性布局 */
        display: flex;
        /* 横向排列的规则,常用的有center space-around space-between left right */
        justify-content: space-around;
        /* 纵向排列的规则 */
        align-items: center;
        height: 250px;
        width: 1000px;
    }