css的学习一

最新推荐文章于 2024-08-24 13:47:49 发布

SPIRT00

最新推荐文章于 2024-08-24 13:47:49 发布

阅读量118

点赞数

分类专栏：前端基础学习文章标签： css 学习前端

本文链接：https://blog.csdn.net/weixin_51884452/article/details/128510488

版权

前端基础学习专栏收录该内容

16 篇文章 1 订阅

订阅专栏

文章目录

一、CSS基础
总结

一、CSS基础

1.css简介

//为结构化文档添加样式。css解决的问题如下

1.如何显示html元素
2.内容和表现分离

2.css语法

//两部分组成：选择器和一条或多条说明,更好的描述可一行只有一个属性。

如：p{color:red; text-align:center;}
还有css注释：/* */

3.css id和class选择器

/html中设置css样式，需要元素中设置id和class选择器
1.css中的id选择器以“#”定义

<style>
#para1
{
	text-align:center;
	color:red;
} 
</style>
<body>
<p id="para1">Hello World!</p>
<p>这个段落不受该样式的影响。</p>
</body>

在这里插入图片描述注意：id属性不要以数字开头，在某浏览器中不显示

2.class选择器
//在css中类选择器以"."号显示。

<style>
.center
{
	text-align:center;
}
</style>
<body>
<h1 class="center">标题居中</h1>
</body>

3.所有的p元素使用class="center"让该元素居中。

<style>
p.center
{
	text-align:center;
}
</style>
</head>

<body>
<h1 class="center">这个标题不受影响</h1>
<p class="center">这个段落居中对齐。</p> 
</body>

4.多个class选择器可使用空格分开

<style>
.center {
	text-align:center;
}
.color {
	color:#ff0000;
}
</style>
</head>

<body>
<h1 class="center">标题居中</h1>
<p class="center color">段落居中，颜色为红色。</p>

注意：类名的第一个字符不能使用数字，否则在浏览器中不显示。

4.css创建

//插入样式表的方法有三种，内部样式，外部样式，内联样式
1.外部样式
定义一个style.css文件

h3{
	color:blue;
}

1.html文件

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>外部样式</title>

    <link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>

    <h3>显示蓝色，是外部样式</h3>

</body>

</html>

在这里插入图片描述注意:如果外部样式放在内部样式后面，外部样式将覆盖内部样式。

外部样式关键语法

 <link rel="stylesheet" type="text/css" href="style.css" />

5.css背景

1.背景颜色background-color
常以下面形式拥有不同的背景颜色,颜色可以用十六进制，rgb,颜色名称定义。

h1 {background-color:#6495ed;}
p {background-color:#e0ffff;}
div {background-color:#b0c4de;}

2.背景图像
backgroud-image

body 
{
	background-image:url('https://static.runoob.com/images/mix/paper.gif');
	background-color:#cccccc;
}

注意：背景图像-水平或垂直平铺可能导致看起来不协调
可以设置图像只在水平方向平铺

<style>
body
{
	background-image:url('https://static.runoob.com/images/mix/gradient2.png');
	background-repeat:repeat-x;
}
</style>

利用backgroup-position改变图像在背景中的位置。

body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}

3.背景简写

body {background:#ffffff url('img_tree.png') no-repeat right top;}

6.css文本

1.文本的对齐方式
当text-align:justify时，每一行的宽度相同，左右边距是相同的。


h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}

2.文本修饰
是用来设置是否有下/上划线，none等。


h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}

3.文本转换和缩进
转换是大小写，缩进文本的第一行。


p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}

p {text-indent:50px;}

总结

当你把一件事做到极致，你就会成为这方面的大佬！

SPIRT00

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css的学习一

css
复制链接

扫一扫

专栏目录