CSS样式快速学习笔记

最新推荐文章于 2024-07-24 13:52:24 发布

戴夫爱吃胡萝卜

最新推荐文章于 2024-07-24 13:52:24 发布

阅读量134

点赞数 1

分类专栏：前端基础知识文章标签： css html

本文链接：https://blog.csdn.net/linbomm/article/details/105836781

版权

前端基础知识专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、三种样式

行内样式

直接写在标签内部

<font style = "color:red"> </font>

内部样式

< head >中使用< style >标签

<head>
    <meta charset="UTF-8">
    <title>css样式</title>
    <style>
        span{
            color: green;
            font-size: 58px;
        }
    </style>
</head>

外部样式

单独定义.css文件，在< head >中使用< link >标签

<head>
    <meta charset="UTF-8">
    <title>css样式</title>
    <link href="a.css" type="text/css" rel="stylesheet">
</head>

二、CSS选择器

（1）元素选择器

span{
    color: green;
    font-size: 25px;
}


<span>菠萝咕咾肉</span>

（2）类选择器

.class1{
    color: green;
    font-size: 25px;
}


<div class="class1">菠萝咕咾肉</div>

（3）id选择器

需要保证本页面唯一

#id1{
    color: green;
    font-size: 25px;
}


<div id="id1">菠萝咕咾肉</div>

（4）层级标签

div span{
    color: green;
    font-size: 25px;
}


<div>
    <span>菠萝咕咾肉</span>
</div>

三、盒子模式

（1）边框

总：

border：边框样式：宽度样式颜色
样式：solid实线 none无边 double双线
weight：边框宽度
hight：边框高度
background-color：背景色

分：
border-top
border-bottom
border-left:
border-right:

（2）内间距

padding
padding-top
padding-bottom
padding-left
padding-right

（3）外边距

margin
margin-top
margin-bottom
margin-left
margin-right

四、浮动

类似飘在空中，会改变原本布局

float：浮动

五、转换

display：转换
- 转为块级元素：block
- 转为行级元素：inline
- 完全隐藏：none

戴夫爱吃胡萝卜

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS样式快速学习笔记

一、三种样式行内样式直接写在标签内部<font style = "color:red"> </font>内部样式< head >中使用< style >标签<head> <meta charset="UTF-8"> <title>css样式</title> <...
复制链接

扫一扫

专栏目录