css

最新推荐文章于 2024-11-12 22:56:44 发布

qq_43552118zx

最新推荐文章于 2024-11-12 22:56:44 发布

阅读量187

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/qq_43552118/article/details/83662366

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一.前端的三大组成部分：
（1）HTML（Hyper Text Markup Language）超文本标记语言（结构层）
（2）CSS(Cascading Style Sheet)层叠样式表(表现层)：用于美化修饰html
（3）JS(JavaScript)脚本语言（行为层）：用于提供用户和界面的交互

二.CSS的概念及介绍：
(1) 作用：美化html结构,同时可以很好的将结构和表现进行分离

(2)语法格式：选择器{属性：属性值；......}

三.CSS的三种表现形式：

行内样式（内联样式）：通过style属性将样式写入head标签中
```
<div style="width: 200px;height: 200px; border:solid 1px blue;/>
```
内嵌样式：通过style标签将样式写入head中：
语法格式：选择器（属性：属性值；属性：属性值...）
选择器是用来筛选元素的一种方式，共7种
eg:
```
 <stytle type=”text/css”>
       div{width:500px;height:800px;
        margin:300px auto;
Background:url(img/1.png);
background-size:100% 100%;
}
/style>
```
外联样式（外部样式）:通过link标签引入css文件夹***css文件到head中四.Css颜色的表现形式

1.直接写颜色名称（red green blue等）

2.使用rab来设置，rag可以设置图片的透明度
eg:background:rgb(76,60,40);background:rgb(70,60,40,0.8);

3.使用16进制设置颜色（最常用的）如：background:#0000

五.选择器：

标签选择器：按标签选择后设置的是同类标签的所有属性（如<table> <a> <div>等标签）
常用属性：
text-decoration:none;-----去掉下划线
text-decoration:underline;---添加下划线
text-decoration:overline;---添加上划线
text-align:center;----设置文本居中对齐
line-height;-----设置文本垂直居中
font-family;-----设置字体样式
font-size;-----设置字体大小
corlor:blue;-----设置字体颜色
background:url(img/img01.jpg);----设置背景
background-size:100% 100%;----对style标签中的图片的背景宽和高百分百填充（百分比中间用空格隔开）
background-size:100%，100%;----设置body中的背景图片的宽和高（百分比中间用逗号隔开）
margin:10px auto;-----设置水平居中
border-collapse:collapse;-----设置表格的边框合并
list-style:none;------去掉无序列表的点

id选择器
格式：#id的值{属性：属性的值}
eg:

<style type="text/css">
div{border:5px solid yellow}
#div01{
width: 200px;height: 200px;background: red;
}
#div02{
width: 200px;height: 200px;background: blue ;
}
#div03{
width: 300px;height: 300px;background:yellow;
}
#div04{
width: 300px;height: 300px;background:pink;
}
</style>
</head>
<body>
<div id="div01"></div>
<div id="div02"></div>
<div id="div03"></div>
<div id="div03"></div>
<div id="div04"></div>
</body>

class类选择器
格式：.class的值{属性：属性值}
（注：必须以字母开头）
eg:

<style type="text/css">
.cl01{
width: 200px;height: 200px;background-color: red;
}
.cl02{width: 200px;height: 200px;background: blue;}
.cl03{
width: 300px;height: 300px;background:yellow;
}
.cl04{
width: 300px;height: 300px;background: pink;
}
</style>
</head>
<body>
<div class="cl01"></div>
<div class="cl02"></div>
<div class="cl03"></div>
<div class="cl03"></div>
<div class="cl04"></div>
</body>