（2）css编程（四部分：入门，语法，盒子模型，定位）

最新推荐文章于 2023-06-30 09:36:11 发布
最新推荐文章于 2023-06-30 09:36:11 发布
阅读量604 收藏 2
点赞数 1
分类专栏： Java Web随笔 文章标签： java ee java web css html 编程
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Haidaiya/article/details/79042546
版权

1  css入门

1.1入门

html：负责网页的结构

css：负责网页的美观（样式）

1.2体验

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css入门</title>
<style type="text/css">
	a{
		font-size:24px;
		color:#0F0;
	 }
</style>
</head>

<body>
<a href="xxxx" >超链接</a><br/>
<a href="xxxx" >超链接</a><br/>
<a href="xxxx" >超链接</a><br/>
<a href="xxxx" >超链接</a><br/>
</body>
</html>

1.3 定义

         CSS（Cascading Style Sheet 层叠样式表） 简称：样式。主要负责网页的美观。

1.4 css的使用方式

            1）行内样式
                注意：
                    1）使用标签的style属性进行css控制，css语句写在style属性值中
                    2）弊端：只能控制一个标签的样式

<a href="xxxx" style="font-size:24px;">超链接</a>
            2）内部样式
                注意：
                   1）使用style的标签进行css控制，css内容写在style标签体内。
                   2）优势：一次控制多个标签的样式。
                   3）弊端：和html标签混杂在一起，不好维护。css内容无法在多个html页面中重用。 

<style type="text/css">
	a{
		font-size:24px;
		color:#0F0;
	}
</style>
如上例，控制html文件中的所有超链接标签。

             3）外部样式（推荐使用）

                   注意：

                        1）建立独立后缀为css的文件，css内容写在该文件中。

                         2）在使用css的html页面中，导入外部css文件。

<!-- 导入外部css文件
    href: 表示外部css文件的位置
    rel : 表示关联的是样式表（不可或缺）
-->
<link href="01.css" rel="stylesheet"/>

2 CSS语法

选择器（selector）：使用选择器来选择需要添加样式的标签。
CSS属性（property）：给选择的标签添加什么样式。例如， 字体大小，颜色，背景.....
CSS值（value）：添加样式的具体值。12px , 红色，背景图片....

2.1 选择器（7个）

        标签选择器
        作用： 选择同名的标签

div{
		font-size:24px;
		color:#F00;	
   }
如上例，选择html文件中的所有div文件。

        类选择器    
        作用： 选择同类的标签

/*类选择器*/
	.c1{
		font-size:24px;
		color:#F00;	
	   }
      注意：1）html文件中的标签中必须有class属性，如class = “c1”。

                  2）引用时使用 .c1 格式

                  3）当一个标签同时被标签选择器和类选择器选择，那么类选择器优先！！！

        id选择器
        作用： 选择一个标签

#d1{
		font-size:24px;
		color:#0F0;
   }
      注意：1）选择的标签必须有id属性。如id = “d1”
                  2）在同一个html页面中，建议不要出现两个同名的id属性的标签，后面使用javascript代码选择标签的时候，getElementById("id属性值")
                  3）id选择器的优先级最高！！！
     并集选择器

     作用： 当多个选择器的css内容相同，那么可以使用并集选择器来合并css内容。

.c1,#d1{
		font-size:24px;
		color:#0F0;
	}
如上例：会选择class = “c1”和id = “d1”的html标签

            交集选择器

            作用： 选择某个选择器中的子标签。

/*交集选择器*/
	.c1 span{ 
		font-size:24px;
		color:#0F0;
	}
如上例：选择div里面的span标签

          通用选择器

          作用； 选择所有的标签（*号为通配符）

*{
		font-size:24px;
		color:#0F0;
}
        伪类选择器
        作用：控制标签在不同状态下的样式。
        标签有四种状态：
                link: 没有访问过的状态
                hover: 鼠标经过的状态
                active:鼠标激活（按下但没有松开）的状态
                visited: 已经被访问过的状态（鼠标点下且松开） 
<style type="text/css">
	/*使用link伪类控制--没有访问过的状态*/
	a:link{
		font-size:24px;
		color:#F00;
	}
	
	/*使用visited伪类控制--已经被访问过的状态（鼠标点下且松开）*/
	a:visited{
		font-size:24px;
		color:#CCC;
		text-decoration:none;
	}
	
	/*使用hover伪类控制-鼠标经过的状态*/
	a:hover{
		font-size:24px;
		color:#00F;
		text-decoration:none; 
	}

	/*使用active伪类控制--鼠标激活（按下但没有松开）的状态*/
	a:active{
		font-size:24px;
		color:#0F0;
		text-decoration:underline;
	}
	
	/*注意：
		1）在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
		2）在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有
		效的。
		
	        正确顺序（很重要）： link visited hover active
*/
</style>
</head>

<body>
<a href="01.css入门.html">超链接</a>
</body>
</html>

2.2 常用的CSS属性和值（6个）

（1）CSS文本

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css文本</title>
<style type="text/css">
	body{
		/*color：颜色*/
		color:#F00;
		/*字符间距*/
		letter-spacing:10px;
		/*对齐方式*/
		text-align:center;
		/*文本修饰  下划线-underline，  中划线(line-through)   上划线-overline  没有:none*/
		text-decoration:line-through;
		/*单词间距*/
		word-spacing:30px;
	}
</style>
</head>
<body>
今天 天气 不错！
</body>
</html>
（2）CSS字体 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css字体</title>
<style type="text/css">
	body{
		/*字体类型 
		注意：这里的字体类型是读取系统的默认字体库，尽量使用通用的字体，如果你设置的字体，用户的系统上没有，就是使用默认的宋体显示。
		*/
		/*
		font-family:"宋体";
		*/
		/*字体大小*/
		/*
		font-size:24px;
		*/
		/*字体样式: 正(normal默认)  斜(italic)*/
		/*
		font-style:italic;
		*/
		/*字体粗细  bold 加粗*/
		/*
		font-weight:bold;
		*/
		
		/* font: 简写属性 */
		font:italic bold 36px "黑体";
	}
</style>
</head>
<body>
我爱学习
</body>
</html>
（3）CSS背景 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css背景</title>
<style type="text/css">	
	body{
		/*背景颜色*/
		/*
		background-color:#0CF;
		*/
		/*背景图片*/
		/*
		background-image:url(../05.%E7%B4%A0%E6%9D%90/mm.jpg);
		*/
		/*设置背景图片是否重复，或如何重复
			not-repeat: 不重复
			repeat-x: x轴重复
			repeat-y: y轴重复
			repeat: x和y轴重复(默认)
		*/
		/*
		background-repeat:no-repeat;
		*/
		/*设置背景的起始位置*/
		/*
		background-position:top center;
		*/
		/*简写属性*/
		background:#3FF url(../05.%E7%B4%A0%E6%9D%90/mm.jpg) no-repeat top center;
	}
</style>
</head>
<body>
</body>
</html>
（4）CSS列表 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css列表</title>
<style type="text/css">
	ul{
		/*列表符号类型*/
		list-style-type:none;
		/*设置列表符号的图片*/
		list-style-image:url(../05.%E7%B4%A0%E6%9D%90/start.jpg);
	}
</style>
</head>

<body>
系统菜单
<ul>
    <li>学生管理</li>
    <li>教师管理</li>
    <li>课程管理</li>
</ul>
</body>
</html>
（5）CSS表格 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css表格</title>
<style type="text/css">
	table{
		/*合并表格的边框*/
		border-collapse:collapse;
	}

</style>
</head>

<body>
<table border="1px" width="400px" height="200px" align="center">
	<caption>2018年期末考试成绩单</caption>
    <thead>
	<tr>
    	<th>姓名</th>
        <th>班级</th>
        <th>成绩</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    	<td>王磊</td>
        <td>计算机1班</td>
        <td>80</td>
    </tr>
    <tr>
    	<td>王海</td>
        <td>计算机2班</td>
        <td>78</td>
    </tr>
    <tr>
    	<td>王辉</td>
        <td>软件1班</td>
        <td>90</td>
    </tr>
    </tbody>
</table>
</body>
</html>

（6）CSS边框

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css边框</title>
<style type="text/css">
	div{
		/*边框颜色*/
		/*简写属性    1) 默认设置方向属性： 上 右 下 左
		              2）如果当前方向没有设置颜色，那么取对面的颜色
		*/
		/*
		border-color:#F00;
		*/
		/*
		border-left-color:#F00;
		border-right-color:#0F0;
		border-top-color:#00F;
		border-bottom-color:#C90;
		*/
		
		/*边框宽度*/
		/*简写属性*/
		/*
		border-width:10px;
		*/
		/*
		border-left-width:10px;
		border-right-width:20px;
		border-top-width:30px;
		border-bottom-width:40px;
		*/
		
		/*边框样式(注意： 边框只有加了border-style才会显示出来)
		solid: 单实线
		dashed:虚线
		dotted: 点
		double: 双实线
		*/
		
		/*简写属性*/
		/*
		border-style:solid;
		*/
		
		/*
		border-left-style:solid;
		border-right-style:dashed;
		border-top-style:dotted;
		border-bottom-style:double;
		*/
	
		/*所有边框属性的简写属性*/
		border:2px solid #F00;
	}
</style>
</head>

<body>
<div>div1</div>
</body>
</html>

3 盒子模型

        3.1 定义

        可以把html页面上每个标签看做是一个盒子。

        盒子相关的属性：
                宽度和高度（width和height）： 决定这个盒子的容量
                内边距（padding）： 盒子边框与内容的距离
                边框（border）： 盒子的厚度
                外边距（margin）： 盒子与盒子之间的距离

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>盒子模型</title>
<style type="text/css">
	div{
		/*宽度和高度*/
		width:100px;
		height:100px;
		/*设置边框*/
		border:3px solid #000;
		/*设置内边距*/
		/*左内边距*/
		padding-left:10px;
		/*上内边距*/
		padding-top:20px;
	}
	
	#div1{
		/*下外边距*/
		/*margin-bottom:10px;*/
	}

	#div2{
		/*上外边距*/
		margin-top:10px;
	}
</style>
</head>

<body>
<div id="div1">div1</div>
<div id="div2">div2</div>
</body>
</html>

（想要了解盒子模型的同学可以在一个html文件中写一个div后，用浏览器按f12查看）

4css定位

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css定位</title>
<style type="text/css">
	div{
		width:100px;
		height:100px;
		border:3px solid #000;
	}
	
	#div1{
		background-color:#F00;
	}
	
	#div2{
		background-color:#00F;
	}
	
	#div3{
		background-color:#0F0;
		/*相对定位*/
		/*
		position:relative;
		left:10px;
		top:10px;
		*/
		
		/*绝对定位*/
		position:absolute;
		left:20px;
		top:20px;
	}
	
	#adv1{
		width:300px;
		height:300px;
		border:3px solid #00F;
		background-color:#09F;
		/*绝对定位*/
		/*position:absolute;*/
		/*固定定位*/
		position:fixed;
		left:450px;
		top:200px;
	}
</style>
</head>

<body>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内
网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内
网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<div id="adv1">立刻咨询立刻咨询立刻咨询立刻咨询立刻咨询立刻咨询立刻咨询</div>
</body>
</html>



Object~
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
50种css常用的代码（实用）
m0_64590669的博客
12-15 5911
50种css常用的代码（实用）
CSS学习
FM11101001的博客
10-18 1472
css基础入门、常用标签
超详细的学习笔记：CSS基础（附代码示例）
最新发布
lbcbjtlhmjq的博客
06-30 2658
CSS入门容易，精通难。因为CSS的属性很多，一个一个去学去记根本不可能，我们要善于借助网络工具。关于HTML和CSS的学习资源，网上的在线教程、速查宝典就有一大推。所以只要了解HTML和CSS标签及属性的基本用法，再借助于在线文档，基本上HTML和CSS的学习就不会有太大问题。但是要提醒大家的是，不要完全依赖于在线文档。最基本的一些属性（比如字体样式、文本样式等）还是需要掌握并且熟练使用，我写这篇博客就是为了让大家更好地熟悉并运用CSS的常见属性。
CSS编程规范
怒放的生命的博客
11-14 1163
CSS编程规范
css编程
lj12340的博客
02-11 335
**CSS入门** 1 .1引入 html：复杂网页的结构 css：负责网页的美观（样式） 1.2体验 css入门 超链接 超链接 超链接 超链接 ...
css-basic.rar_css csharp_site:www.pudn.com
09-14
这篇教程是针对CSS初学者设计的，旨在帮助他们快速入门并掌握CSS的基本概念和功能。CSS（层叠样式表）是用于控制网页元素呈现样式的关键技术，与HTML结合使用，可以让网页设计变得更为灵活和丰富多彩。在这个"css-...
PyQt5界面编程入门
06-29
《PyQt5界面编程入门》课程是一门专为Python初学者设计的实践导向型教程，旨在帮助学习者快速掌握使用PyQt5库进行桌面应用程序开发的技能。PyQt5是Python编程语言中的一种图形用户界面（GUI）工具包，基于Qt库，并...
源代码 Web编程入门经典-HTML、XHTML和CSS(第2版)
01-21
《源代码 Web编程入门经典-HTML、XHTML和CSS(第2版)》是一本针对初学者的Web开发教程，涵盖了网页制作的核心技术。这本书详细介绍了如何使用HTML、XHTML和CSS来创建和设计现代网页，是学习网页开发的基础。 HTML...
Introduction-to-IT-Assessment-1:信息技术入门的首次评估
03-19
2. 属性与值 HTML标签可以具有属性，这些属性提供了额外的信息。例如，`<img>`标签的`src`属性指定图像的URL，`alt`属性提供替代文本，`width`和`height`设定图像尺寸。属性通常以键值对的形式出现，如`attribute=...
网页设计入门.pdf
12-23
5.3 常用的样式属性：涵盖文本、背景和方框（盒子模型）属性。 5.4 样式表的应用方式：内嵌、行内和外部引用CSS样式表的方法。 5.5 总结：回顾CSS的基本使用。 **第6章 JavaScript基本语法** 6.1 简介：JavaScript...
css编程语言
12-24
常用英语单词,帮助您快速学习css编程语言词汇
HTML5 & CSS3之编程入门经典
12-20
《HTML5&CSS3;编程入门经典》提供了对于最佳实践及技术的手把手指导。作为一本实用参考，《HTML5&CSS3;编程入门经典》深入阐述了为当今多设备多平台环境开发独特的现代网站所需的HTML及CSS最新版本。
课堂案例之用CSS画红绿红三个盒子
小王的博客
10-24 304
课堂案例之用CSS画红绿红三个盒子
编程知识：什么是CSS？
ysds20211402的博客
01-14 210
转自：微点阅读https://www.weidianyuedu.com/content/2217342398104.html 网海茫茫，怎样使自己的网页成为一道亮丽的风景线让人过目不忘？怎样使自己的网页的风格独特一致？怎样免除众多HTML标志属性设置的烦恼？一口气说这么多，只是想说，CSS---层叠样式单可以助你一臂之力！ CSS即Cascading Style Sheet(级联样式单)的缩写，我们又常称这为风格样式单Style Sheet，顾名思义，是用来进行网页风格设计的。比如，我想让我的链接..
CSS-API(CSS编程接口),CSSOM(css对象模型)
peterzhangsnail的博客
09-03 2286
1.CSS API及其实现关系 相关术语 1. API:API（Application Programming Interface,应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。 2. CSSOM:CSS Object Model ,CSS对象模型.有关的文献:https://www.w...
Css经典笔记
热门推荐
飘
04-24 1万+
# 课程目标: &gt; 1. 学会使用CSS选择器 &gt; 2. 熟记CSS样式和外观属性 &gt; 3. 熟练掌握CSS各种选择器 &gt; 4. 熟练掌握CSS各种选择器 &gt; 5. 熟练掌握CSS三种显示模式 &gt; 6. 熟练掌握CSS背景属性 &gt; 7. 熟练掌握CSS三大特性 &gt; 8. 熟练掌握CSS盒子模型 &gt; 9. 熟练掌握CSS浮动 &gt; 10.熟练...
HTMLCSS编程规范
qq_55636063的博客
05-09 293
HTMLCSS规范
html中关于多个盒子嵌套的排列问题。
qq_42122409的博客
10-09 1万+
贴上代码   &lt;!--由此得出结论,当fa1中的子盒子son1溢出到父级元素外面后，与fa1同级的fa2盒子会紧跟着fa1，而不是son1!--&gt;
03 CSS
qq_28384023的博客
04-14 140
1. 什么是CSS 是一种专门在浏览器编译并执行的编程语言. 用于定位浏览器中HTML标签并对定位的HTML标签中【样式属性】进行统一管理 2. HTML中的属性分类 2.1 基本属性 大多数HTML标签都拥有属性，是一个非常庞大群体 比如 id属性，相当于身份证编号，用于区分HTML标签 <input type="text" id="one"/> <input type="text" id="two"/> 比

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值