关于CSS的简单总结

最新推荐文章于 2024-06-02 15:45:53 发布
最新推荐文章于 2024-06-02 15:45:53 发布
阅读量1.2k 收藏 1
点赞数
文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Harper_1205/article/details/113803507
版权

在这里插入图片描述

1.引入方式
(1)内嵌式引入
把style标签嵌套在head标签中。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css"></style>
</head>
<body>
	
</body>
</html>

其中CSS就嵌入在title下面的style里面。
(2)外链样式
把css当成是一个文件，通过link标签引入到html中。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="">
</head>
<body>
	
</body>
</html>

title下面的link里的href=""里面填写CSS的路径（CSS需要重新建立一个文件，我们需要写的CSS就在这个文件里面写，这样你想调用就可以不用重新写了）。
2.选择符
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。选择器通常是您需要改变样式的 HTML 元素。每条声明由一个属性和一个值组成。属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。如果要定义不止一个声明，则需要用分号将每个声明分开。
(1)标签选择符
通过标签的名字来命名的。
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
    body{
    	color: red;
    }
	</style>
</head>
<body>
	Hello,world.
</body>
</html>

显示效果如下：
在这里插入图片描述(2)id选择器
当标签中出现id属性的 那么可以使用id选择器。
Id选择器通常应用于某些标签中独有的样式。
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
    p{
    	color: red;
    }
    #one{
    	color: blue;
    }
	</style>
</head>
<body>
    <p>你好，世界。</p>
	<div id="one">Hello,world.</div>
</body>
</html>

效果：
在这里插入图片描述id选择器前面需要加上"#"才会生效。
(3)类选择器
当标签中出现class属性的时候 那么可以使用类选择器。
类选择器通常应用于某几个标签具有相同的样式。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
    .one{
    	color: orange;
    }
	</style>
</head>
<body>
    <p class="one">你好，世界。</p>
</body>
</html>

在这里插入图片描述要注意的是此选择器也是前面要加上"."才会生效。
(4)全选择器
使用*号来表示 对整个html中的所有标签都起作用

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
    p{
    	color: red;
    }
    #one{
    	color: blue;
    }
    *{
    	font-size:36px;
    }
	</style>
</head>
<body>
    <p>你好，世界。</p>
	<div id="one">Hello,world.</div>
</body>
</html>

效果可以跟id选择器的效果图比较：
在这里插入图片描述(5)分组选择符
多个选择符同时具备同一种样式使用分组选择符。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
    p{
    	color: red;
    }
    #one{
    	color: blue;
    }
    h1{
    	font-size: 40px;
    	color: green;
    }
    p,h1,div{
    	margin-top: 100px;
    	padding-left: 200px;
    }
	</style>
</head>
<body>
    <p>你好，世界。</p>
	<div id="one">Hello,world.</div>
	<h1>Hello,world.</h1>
</body>
</html>

在这里插入图片描述注意：各个选择符之间要用逗号（，）链接。
(6)组合选择符
把前面几种选择符综合的使用在一起。
3.控制html中的字体
(1)大小
用“font-size：；”表示，前面已经展示过。
(2)颜色
用“color: ;”表示，前面也有。
(3)字体
用“font-family”表示。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
    #one{
    	font-family: 楷体;
    	font-size: 36px;
    }
	</style>
</head>
<body>
	<div id="one">Hello,world.</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
    #one{
    	font-family: 宋体;
    	font-size: 36px;
    }
	</style>
</head>
<body>  
	<div id="one">Hello,world.</div>
</body>
</html>

效果如下：
楷体：
在这里插入图片描述
宋体：
在这里插入图片描述(4)行高
用“line-height: ;”表示，使用方法与上面一致。
(5)粗细
设置字体的粗细 font-weight：normal（正常）bold（粗体）。

注意：
在使用单位时，px 和em比较常用建议大家经常使用百分比,适合做屏幕适配。
4.特点
(1)继承
网页中子元素，将继承父元素的样式
例如：要控制段落p中的文字大小，可以直接给body标记加样式。
(2)层叠
网页中子元素定义了与父元素相同的样式，则子元素的样式将覆盖掉父元素的样式，后面定义的样式，会覆盖前面定义的样式。
5.常用的html中控制的文本
(1)文本缩进
用“text-ident: ;”表示。
我们根据上面的代码进行修改。
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
    #one{
    	font-family: 宋体;
    	font-size: 36px;
    	text-indent:2em;
    }
    p{
        font-size: 40px;
        color: green;
        font-family: 宋体;
    }
	</style>
</head>
<body>  
	<div id="one">Hello,world.</div>
	<p>你好，世界</p>
</body>
</html>

效果是这样的：
在这里插入图片描述
很明显的看到，“Hello，world.”因为设置了“text-indent:2em;”前面空了两格。
(2)对齐方式
文本水平对齐方式 text-align：left[左]center[中]right[右]；，怎么敲跟上面的一样就不再多说。
6.伪类
(1)未访问的链接
a:link{ }
(2)已访问的链接
a:visited{ }
(3)鼠标移动在链接上
a:hover{ }
(4)鼠标按到链接上
a:active{ }
在html中要敲出a标签。
7.盒子模型
在布局是经常用到。
内边距 padding 用于填充内容内部。
外边距 margin 用于描述浏览器边缘到内容的之间的距离。
边框 border：1px solid black。
Margin：100px 上下左右都是100px的距离。
Margin：100px 200px； 上下100px、左右 200px。
Margin：100px 200px 300px 上100px 左右 200px 下300px。
Margin：100px 200px 300px 400px 上、右、下、左。
Margin-top margin-left margin-right margin-bottom 边框也适用于4个方向。
在这里插入图片描述
例：
上代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
    #one{
    	border: 2px solid orange;
        width: 100px;
        height: 200px;
        margin-left:100px;
        margin-top: 300px; 
    }
    p{
        font-size: 36px;

    }
	</style>
</head>
<body>  
    <P>你好，世界</P>
	<div id="one">小盒子</div>
</body>
</html>

效果如下：
在这里插入图片描述小盒子那里就是所谓的盒子，我们可以通过上面我们讲的调整他的位置、边框颜色、边框粗细等等。
8.块状元素和内联元素
(1)块状元素
具有高度和宽度的属性，但是它不允许其他元素和它同行显示。
代表标签：div p 等等。
默认属性： display:block;。
(2)内联元素
不具有宽度和高度的属性，允许其他元素与其同行显示。
代表标签：a span。
内联元素的默认属性 display:inline;。
9.控制背景
(1)背景颜色
background-color：；
根据上面的代码修改

#one{
    	border: 2px solid orange;
        width: 100px;
        height: 200px;
        margin-left:100px;
        margin-top: 300px; 
        background-color: grey;
    }

效果：
在这里插入图片描述可以看到盒子里的背景变成了灰色。
(2)背景图像
background-image：url（背景图像的位置及全称）；，不经常使用。
(3)背景图像的重复方式
例如：
background-repeat:[repeat、no-repeat、repeat-x、repeat-y]；
意思分别是，重复，不重复，在x轴重复，在y轴上重复。
10.布局
(1)浮动布局
浮动是css实现布局的一种方式，包括div在内的任何元素都可以以浮动的方式进行显示。
none：不浮动。
left：对象向左浮动，而后面的内容流向对象的右侧。
right：对象向右浮动，而后面的内容流向对象的左侧。
来看代码：
未浮动前：
html：

<div id="one">小盒子</div>
<div id="two">大盒子</div>

css：

#one,#two{
    	border: 2px solid orange;
        width: 100px;
        height: 200px;
        margin-left:100px;
        background-color: grey;
    }

效果：
在这里插入图片描述
由效果看来，大盒子和小盒子是上下关系，未并列。
浮动后：
代码：
html部分不变。
css部分：

#one{
    	float:left;
    	border: 2px solid orange;
        width: 100px;
        height: 200px;
        margin-left:100px;
        background-color: grey;
    }
     #two{
    	border: 2px solid orange;
        width: 100px;
        height: 200px;
        margin-left:100px;
        background-color: grey;
        float:left;
    }

效果：
在这里插入图片描述

大盒子和小盒子成了并列关系。
11.导航
根据实例展示来了解导航
(1)水平
html：


<ul>
  <li><a href="#home">主页</a></li>
  <li><a href="#news">新闻</a></li>
  <li><a href="#contact">联系</a></li>
  <li><a href="#about">关于</a></li>
</ul>

css：

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
} 
li {
    float: left;
} 
li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
/*鼠标移动到选项上修改背景颜色 */
li a:hover {
    background-color: #111;
}

效果：
在这里插入图片描述

(2)垂直
html：


<ul>
  <li><a href="#home">主页</a></li>
  <li><a href="#news">新闻</a></li>
  <li><a href="#contact">联系</a></li>
  <li><a href="#about">关于</a></li>
</ul>

css：


ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px;
    background-color: #f1f1f1;
}
li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
}
/* 鼠标移动到选项上修改背景颜色 */
li a:hover {
    background-color: #555;
    color: white;
}

效果：
在这里插入图片描述
以上就是我的简单总结。

Harper_1205
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
简单CSS 总结
孙叫兽的博客
07-23 897
目录 CSS 总结 你已经学习了CSS,下一步学习什么呢? CSS 总结 本教程已向你讲解了如何创建样式表来同时控制多重页面的样式和布局。 你已经学会如何使用 CSS 来添加背景、格式化文本、以及格式化边框，并定义元素的填充和边距。 同时，你也学会了如何定位元素、控制元素的可见性和尺寸、设置元素的形状、将一个元素置于另一个之后，以及向某些选择器添加特殊的效果，比如链接。 你已经学习了CSS,下一步学习什么呢? 下一步应该学习 JavaScript 。 JavaScript Java.
CSS内容简单总结（思维导图版本）
07-15
CSS内容简单总结（思维导图版本）
学习css及html中主要内容的总结。希望对初学则有帮助
02-18
学习css及html中主要内容的总结。希望对初学则有帮助。学习css及html中主要内容的总结。希望对初学则有帮助。
CSS简单总结
erhuobuer的博客
07-27 102
css简单总结
从现在go，一切都不迟
07-24 658
white-space 属性设置如何处理元素内的空白。 white-space: nowrap  规定段落中的文本不进行换行
CSS 简单学习总结
qq_53574266的博客
07-10 91
css 学习简单总结
CSS基础知识总结
Lotus_fragrance的博客
04-29 3009
一、基础认识 css的中文又叫做：层叠样式表。 语法：选择器 + {属性名： 属性值}、 css引入方式：1.内嵌式，写在style标签中。通常放在head中。2.行内式：写在style标签中，写在标签中。3.外联式：单独写一个css文件，通过link把该文件引入。 二、选择器 选择器 在html中写法 在css中写法 标签选择器 就是标签本身 div{ } 类选择器 class= "banner" .banner { }.
css优先级总结
07-19
CSS 优先级小结 CSS初学感觉很简单，但随着学习的深入才感觉CSS的水由多深，平常总会遇到各种坑，先总结一些经常遇到的坑。
css简单入门学习以及总结
03-09
适合入门以及刚刚接触HTML样式的人群
CSS常用文本样式总结
12-11
CSS文本样式是相对于内容进行的样式修饰。由于在层叠关系中，内容要高于背景。所以文本样式相对而言更加重要。有些人对文本和字体样式之间的不同不太了解，简单地讲，文本是内容，而字体则用于显示这个内容。本文将...
简单总结CSS3中视窗单位Viewport的常见用法
09-24
主要介绍了CSS3中视窗单位Viewport的常见用法,包括视窗的高度宽度及垂直居中等基本设定方法,需要的朋友可以参考下
CSS简单基础总结
jinjina_的博客
07-10 171
CSS总结 一、CSS概念 1.什么是CSS Cascading Style Sheet 层叠样式表 2.CSS的作用 实现网页布局，美化网页 3.主要学什么 学习CSS就是学习相关的选择器和属性。 4.CSS的版本 CSS主要分为CSS2和CSS3 5.引用CSS的三种方式 行内样式 在需要添加的标签后面直接加入style属性（在body中） <h1 style="color: red;">Hello</h1> 内部样式 在head中添加style标签
CSS样式简单总结
xiaolongwu8666的专栏
03-08 367
感谢这篇文章，参考http://www.cnblogs.com/xugang/archive/2010/09/24/1833760.html 之前对CSS的样式的优先级不太清楚，只知道 1、（外部样式）External style sheet 现在了解到CSS的优先级分为 2、选择器的优先权   CSS 优先级法则： A  选择器都有一
nginx 配置 gzip压缩及去除 html 缓存
chechenshi的博客
05-29 466
【代码】nginx 配置 gzip压缩及去除 html 缓存。
html前端怎么赚钱：探索多元盈利途径
最新发布
asdgftv_niiy的博客
06-02 211
综上所述，HTML前端赚钱的途径多种多样，从基础技能的提升到自由职业、教育与培训以及创业与产品开发等各个方面都有机会实现盈利。在与客户沟通时，要清晰地表达自己的能力和项目需求，以确保项目的顺利进行。此外，远程工作还允许你灵活地安排自己的时间和工作地点，实现工作与生活的平衡。在制定课程大纲时，要考虑到不同学员的需求和水平，确保课程内容的实用性和针对性。同时，你还需要关注市场动态和竞争对手的情况，不断调整和优化自己的产品策略。通过不断提升自己的技能，你可以承接更多复杂的项目，从而获得更高的收益。
HTML中Canvas关键知识点总结
2301_79858914的博客
06-02 589
Canvas 提供了一套强大的 2D 绘图 API，适用于各种图形绘制、图像处理和动画制作。掌握 Canvas 的基础操作、路径绘制、变换操作、状态管理和性能优化等知识，可以帮助你创建复杂且高效的网页图形应用。通过以上详细的讲解，希望能让你对 Canvas 有更全面的理解，并能够应用这些知识点进行实际开发。
HTML静态网页成品作业(HTML+CSS)——企业装饰公司介绍网页(4个页面)
weixin_42283461的博客
05-30 404
HTML静态网页成品作业(HTML+CSS)——企业装饰公司介绍网页(4个页面)
【HTML】通过焦点，获取部分上下文内容
随便写写
05-30 168
通过焦点，获取部分上下文内容
html css八股文
01-03
HTML CSS八股文是指在前端开发中常见的一些基本技巧和知识点的总结。下面是一个简单的HTML CSS八股文示例： HTML部分： ```html <!DOCTYPE html> <html> <head> <title>HTML CSS八股文示例</title> <style> /* CSS样式 */ .container { width: 300px; height: 200px; overflow: auto; } .box { position: relative; height: 250px; background-color: #f1f1f1; } </style> </head> <body> <div class="container"> <div class="box"></div> </div> </body> </html> ``` CSS部分： ```css /* CSS样式 */ .container { width: 300px; height: 200px; overflow: auto; } .box { position: relative; height: 250px; background-color: #f1f1f1; } ``` 这个示例展示了一个父元素设置了`overflow: auto;`，子元素设置了`position: relative;`且高度大于父元素的情况。在IE6、IE7中，子元素会被隐藏而不是溢出。通过设置父元素的`overflow: auto;`属性，可以实现子元素的溢出显示。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值