黑马毕向东Java课程笔记（35天day30-1——30-12）CSS

最新推荐文章于 2019-11-18 19:52:49 发布

KongJetLin

最新推荐文章于 2019-11-18 19:52:49 发布

阅读量452

点赞数

分类专栏： Java资料文章标签： java 黑马 CSS HTML

本文链接：https://blog.csdn.net/LKJgdut/article/details/102735805

版权

注意，在用style标签方式或者导入方式使用CSS的时候，需要加type属性；而在使用link方式使用CSS的时候，需要加rel，href，type属性
CSS选择器：html标签名选择器、class选择器（多个标签可以相同）、id选择器（变迁的di不同）。优先级：标签选择器<类选择器<id选择器<style属性。
关联选择器、组合选择器、伪元素选择器
CSS盒子模型、CSS的布局（漂浮、定位），布局以属性的形式来设置。

1、CSS概述
CSS是层叠样式表（Cascading Style Sheets）用来定义网页的现实效果。可以解决html代码对样式定义的重复，提高了后期样式代码的可维护性，并增强了网页的现实效果功能。简单一句话：CSS将网页内容和显示样式进行分离，提高了显示功能。
那么CSS和HTML是如何在网而代码中相结合的呢？

CSS与HTML通过4种方式进行结合
1、style属性方式：
利用标签中style属性来改变每个标签的显示样式。
例：
<p style="background-color:#FF0000；color:#FFPPPF">
			p标签段落内容。
</p>
该方式比较灵活，但是对于多个相同标签的同一样式定义比较麻顺，适合局部修改。

2、style标签方式：（内嵌方式）
在head标签中加入style标签，对多个标签进行统一修改。
<head>
		<style type="text/cas">
				 p{
    color:#FF0000；}
		</style>
</head>
该方式可以对单个页面的样式进行统一设置，但对于局部不够灵活。

3、导入方式：
前提是已经存在一个定义好的css文件，网页的一部分样式需要用到，那么就用到这种方式。
例：
<style type="text/css">
	import url（css_3.css）;
</style>
注：url括号后面必须要用分号结束。如果导入进来的样式与本页面定义的样式重复，以本页面定义样式为准。

4、链接方式：
通过head标签中link标签来实现，前提也是先要有一个已定好的css文件。
例：
<link rel="stylesheet" href="properties.css" type="text/css" />
注：可以通过多个href标签链接进来多个css文件，重复样式以最后链接进来的css样式为准。

方法1与方法2演示代码如下：

<!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=gb2312" />
<title>无标题文档</title>
	<style type="text/css">
		div
		{
    
			background-color:#000000; color:#FFFFFF;
		}
	</style>
</head>

<body>
	<!--
	css和html相结合的第一种方式。
    1、style属性：每一个html标签中都有一个style样式属性，该属性的值就是css代码。
		style中可以添加多个属性，属性之间用“;”隔开 
		
    2、style标签：使用style标签的方式，一般都定义在head标签中
		使用type属性标识里面的文本类型：text/css、text/javascript
		并且得明确属性是对<body>中的哪一类标签进行操作，用{}进行区域划定。注意定义之后这类标签全部变为这个样式。
		如果使用style标签在<head>设定之后，还在<body>中继续使用style属性设定，会发生样式的层叠，
		既后面设定的样式会覆盖前面的样式。（35-30-1-9.30）——重复的样式以最后加载为准，不重复的样式保留。
	-->
		<div style="background-color:#FF9966; color:#0000FF">这是一个div区域</div>
		<div>这是一个div区域</div>
		<span>这是一个span区域</span>
		<span>这是一个span区域</span>
		<p>这是一个段落1</p>
		<p>这是一个段落2</p>
</body>
</html>

方法3演示代码如下：

css.html
<!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=gb2312" />
<title>无标题文档</title>
	<style type="text/css">
		@import url(properties.css);
		<!--注意，上面的import语句是css语句，这里是HTML语句与css语句联合编程，在style标签中的都是css语句-->
	</style>
</head>

<body>
	<!--
	如果我们多个文件里面某些标签都要使用同一样式，一个文件一个文件定义太麻烦，我们可以将样式封装到一个css文件
	3、首先创建一个描述样式属性的css文件，随后在需要设定样式的html文件的<head>下的<style>下将已有的样式文件关联进来即可
	关联格式：@import url(要使用的css文件);注意要使用的css文件要与html文件放在同一个目录下。
	（不知道为啥这种方式在ie浏览器中显示不出来，但是在Chrome中可以）
	
	注意：CSS的注释是/**/
	为了在修改样式的时候不需要修改当前html界面的代码，我们可以将当前的import语句封装到另一个css文件中
	以后再想修改标签的样式，只要在这个文件修改即可，而主界面只需要在其代码中导入该文件即可
	
	为什么不把div.css、span.css等文件全部放到一个css文件？
	可以，但是不建议这样做，除非我们的css只是针对某一种类型的界面进行操作，一般都是每个标签设置的css文件分开
	加入一个界面有博客、有新闻，那么他们的div可以设置一样（在同一个div.css文件夹里面），
	而因为span与div没有设置在一起，那么我们可以对他们进行单独的设计，这就是分开的好处
	-->
		<div>这是一个div区域</div>
		<div>这是一个div区域</div>
		<span>这是一个span区域</span>
		<span>这是一个span区域</span>
		<p>这是一个段落1</p>
		<p>这是一个段落2</p>
</body>
</html>
-------------
properties.css
/* CSS Document */
/*
在该文件中导入其他css文件。 
注意，CSS导入语句前面需要加一个@
*/
@import url(div.css);
@import url(span.css);
-------------
div.css
/* CSS Document */
div
{
	background-color:#FFFFFF; 
	color:#FF0000
}
--------------
span.css
/* CSS Document */
span
{
	background-color:#FC3;
	color:#0C0;
}

方法4演示代码如下：

<!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=gb2312" />
<title>无标题文档</title>
	<!--注意是标签的属性之间才使用;分号隔开，而标签选择器（如rel，href,type等则使用空格隔开即可）之间 -->
	<link rel="stylesheet" href="properties.css" type="text/css" />
</head>

<body>
	<!--
	html里面有一个link标签<link />：链接一个与当前网页相关联的页面，这个页面用来对当前网页进行操作（比如样式操作）
	属性：
	rel：描述目标文档与当前文档的关系。（如stylesheet）
	herf：用于连接操作的文件
	type属性；文档类型
	
	与import方法不一样，第三种方法是使用css代码导入，而第四种方法使用的是html的link语句
	-->
		<div>这是一个div区域</div>
		<div>这是一个div区域</div>
		<span>这是一个span区域</span>
		<span>这是一个span区域</span>
		<p>这是一个段落1</p>
		<p>这是一个段落2</p>
</body>
</html>
--------
其他的文件与方法3的示例相同

CSS样式优先级：由上到下，由外到内，优先级由低到高。记住是后加载的为主即可。
总结css代码格式：
选择器名称{属性名：属性值；属性名：属性值；…}
属性与属性之间用分号隔开，属性名与属性值之间用冒号：分开，如果一个属性有多个值的话，那么多个值用空格隔开。

2、基本选择器&优先级
选择器相关概念如下

就是指定css要作用的标签，那个标签的名称就是选择器。意为：选择哪个容器。
如上面的html标签名选择器：
div{
   
		background-color:#000000; color:#FFFFFF;
}
选择器共有三种：
a）html 标签名选择器，使用的就是html的标签名。（元素选择器）
b）class选择器，其实使用的是标签中的class属性。
c）id选择器，其实使用的是标签的中的id属性。
每一个标签都定义了clasa属性和id属性，用于对标签进行标识，方便对标签进行操作。
在定义的中，多个标签的clasa属性值可以相同，而id值要唯一，因为Javascript中经常用。

标签选择器我们之前已经演示，下面我们来演示class属性选择器

<!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=gb2312" />
<title>无标题文档</title>
	<style>
		div
		{
    
			background-color:#999999; color:#FF0000
		}
		
		/*这里是css代码，可以使用css的注释
		相要使用同一个类名来设置不同标签的样式相同，一个标签设置异常太麻烦
		span.haha{}、div.haha{}、p.haha{}
		我们使用.类名{}，就可以将叫做“类名”的标签全部设置为相同样式
		*/
		.haha
		{
    
			background-color:#CCFF66; color:#0000FF
		}
		
		/*预定样式，实现动态的加载。我们后面可以将类名切换成预定义样式的类名，实现效果的转变
		.hehe{
		background-color:#C93;
		color:#00F;
		}*/
		
	</style>
</head>

<body>
	<!--
	假设有10个div标签，其中有5个人样式相同，另外5个样式也相同。
	我们可以把相同样式的标签归为一个class，使用标签中的class属性 。（下面用2个代替10个样式进行演示）
	在<head>中使用：标签名.类名来设置class选择器。
	注意：类选择器比标签名选择器的优先级高！！！
	
	class选择器还可以将不同的标签设置为相同的样式，只要将不同的标签设置为同样的class名即可
	-->
		<div class="haha">这是一个div区域1</div>	<!--这个标签的class名设置为“haha”-->
		<div>这是一个div区域2</div>
		
		<span class="haha">这是一个span区域1</span>
		<span>这是一个span区域2</span>
		
		<p class="haha">这是一个段落1</p>
		<p>这是一个段落2</p>
</body>
</html>

id选择器

<!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=gb2312" />
<title>无标题文档</title>
	<style>
		div.haha	/*绿底蓝字*/
		{
    
			background-color:#33FF99; color:#0033CC
		}
		div#qq	/*黑底绿字*/
		{
    
			background-color:#000000; color:#33FF00
		}
		div		/*白底红字*/
		{
    
			background-color:#FFFFFF; color:#FF0000
		}
		
	</style>
</head>

<body>
	<!--
	首先，id引用的格式是：标签名#id名
	同样的，如果想把id名相同的不同标签设置为相同的样式，设置#id名{}即可
	
	id与class设置的区别：在用法上其实是一样的
	通常ID的取值在页面中是唯一的，因为该属性除了给css使用，还可以被js使用。
	id通常都是为了去标示页面中一些特定区域使用的。
	也就是说，一般不会给多个不同的标签取同一id名，这部分功能class就可以实现，
	但是我们在标示特定区域的时候会使用到id
	-->

最低0.47元/天解锁文章

KongJetLin

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
黑马毕向东Java课程笔记（35天day30-1——30-12）CSS

1、CSS概述 CSS是层叠样式表（Cascading Style Sheeta）用来定义网页的现实效果。可以解决html代码对样式定义的重复，提高了后期样式代码的可维护性，并增强了网页的现实效果功能。简单一句话：CSS将网页内容和显示样式进行分离，提高了显示功能。那么CSS和HTML是如何在网而代码中相结合的呢？CSS与HTML通过4种方式进行结合1、style属性方式：利用...
复制链接

扫一扫