Java Web——CSS详解

最新推荐文章于 2023-05-30 20:02:52 发布

明天，你好呀

最新推荐文章于 2023-05-30 20:02:52 发布

阅读量1.2k

点赞数

分类专栏： Java Web

本文链接：https://blog.csdn.net/weixin_45082647/article/details/107317698

版权

Java Web 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

1、CSS简介

Cascading Style Sheets，层叠样式表，作用就是用来美化网页标签，控制HTML标签；
HTML标签他的主要作用，就是用来定义网页元素，但是它还会自带一些属性，来控制这个网页元素的展示样式。
HTML 自带的属性很贫乏，有时不能满足我们更加丰富的样式需求，那这个时候我们的CSS就登场了，CSS里面提供了非常丰富的样式属性，能够满足我们对样式的需求。也就是说有了CSS之后，我们要控制这个元素长什么样式，就交由CSS来控制，基本上不用HTML标签自带的属性来控制样式。
这样做的目的，就是用来解耦，HTML定义网页元素，CSS用来控制元素的展示样式。
css的基本语法：

基本语法：
<style type="text/css">
选择器{
       属性1:属性值；
       属性2：属性值
       。。。。。。
     }
</style>

2、HTML与CSS结合的方式

内联样式：

1、内联样式是将CSS代码写到HTML标签的内部，每个标签都有一个style属性，他的值就写CSS代码；
2、CSS代码的语法是——属性名:值值值

style="color: red;font-size: 500px;"

3、层叠：多个样式控制同一个标签，会叠加生效；
内联样式的写法缺点：一次只能控制一个标签所展示的样式，代码复用性低，且书写凌乱，不是首选写法。

代码示例：

<h1 style="color: aquamarine; font-weight: 700; font-family: 楷体;">这是一行文字</h1>

在这里插入图片描述
内部样式：

1、内部样式：将CSS代码抽离出来，写在一个固定的位置；
2、好处就是能够提高代码的复用性，一次可以控制一个标签或多个标签的展示样式；
3、但是这种方式，得配合选择器。

<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			h1{
				font-size: 20px;
				color: blue;
				font-family: 楷体;
			}
		</style>
</head>
<body>
	<h1>这是一行文字</h1>
</body>

在这里插入图片描述
外部样式：

1、将CSS代码统一抽取到一个文件当中来编写；
2、他就可以控制多个页面上的元素的展示样式，复用性更高，是开发首选。
3、以后我们在做网页的时候，有很多的共性部分，我们可以将他们抽离出来，放在一个CSS文件中，这种方式是前两种结合方式不能做到的，可以减少重复的代码；
4、值得注意的是，不止可以引用一个个性页面，可以使用link引用很多共性页面；

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
	</head>
	<body>
		<h1>这是一行文字</h1>
	</body>
</html>

在这里插入图片描述

3、行标签、块标签、行内块标签

HTML标签分类：

1、行内标签：包含a、span、em、strong、b、i、u、label、br；
特点：可以多个标签存在一行，不能直接设置行内标签的高度、宽度、行高以及顶和底边距，完全靠内容撑开宽高；

a标签：主要用来链接一个其他的网页；
span标签：主要用来对行内的文字进行一些样式以及其他的操作；
em标签：一般用来对文字进行强调，使用斜体体现出来；
strong标签：一般用来对文字进行强调，使用加粗字体体现出来；
img标签：图片引用标签，其中 src属性中写入图片的地址；
var标签：JavaScript中命名变量的标签。

2、块标签：包含p、div、ul、ol、li、dl、dt、dd、h1~h6、form；
特点：独占一行，对高度、宽度、行高以及顶和底边距都可设置的属性值生效；如果不给宽度，块级元素就默认为浏览器的宽度，即就是100%宽；

p标签：段落标签，段落文字使用，默认格式：段尾进行换行；
div标签：划分块的主要使用标签；
ul标签：无序列表的主标签，后面的标号为圆点（黑色）；
ol标签：有序列表的主标签，后面一般跟有序的1,2,3,4,5…；
li标签：列表中的主体使用标签
dl标签：自定义标签的主标签；
dt标签：自定义标签的表头；
dd标签：自定义标签的表头的解释（描述）信息；
h1~h6：6级标题标签、字体的大小依次变小。

3、行内块标签：img、input、textarea、button
特点：结合的行内和块级的有点，不仅可以对宽高属性值生效，还可以多个标签存在一行显示；
以button标签为例：

<button type="button" style="margin-top: 50px;">按钮</button>
<button type="button">按钮</button>
<button type="button">按钮</button>

在这里插入图片描述

由于button是一个行内块标签，这也意味着既有行标签的属性，也可以设置宽高，因此由于第一个button标签的相对位置的属性设置，3个button标签排在一行，并都距离顶部50px；

各种标签之间的转换：

1、块级标签转换为行内标签：display:inline；
2、行内标签转换为块级标签：display:block；
3、转换为行内块标签：display:inline-block；
4、隐藏标签，隐藏之后所占的位置不在了：display: none；
5、隐藏标签，标签原来占的位置还是在的：visibility:hidden；
6、显示：visibility:visible；

代码示例1：将行内标签转换为块级标签

<html>
	<head>
		<title>行内标签转块级标签</title>
		<style type="text/css">
			a {
				width: 200px;
				height: 200px;
				background-color: red;
				display: block;
			}
		</style>
	</head>
	<body>
		<!--正常情况a标签作为一个行内标签你设置长和宽是没有效果的-->
		<a href="https://www.baidu.com">百度</a>
	</body>
	<!--而当你用display: block;代表行内标签转为块级标签-->
</html>

在这里插入图片描述
代码示例2：将行内标签转换为行内块标签

<html>
	<head>
		<title>块级和行内块级</title>
		<style type="text/css">
			a {
				width: 100px;
				height: 100px;
				background-color: green;
				display: inline-block;
			}

			div {
				width: 100px;
				height: 100px;
				background-color: red;
				margin-top: 10px;
				/* margin-top是来设置上下两个块的上下间距*/
			}
		</style>
	</head>
	<body>
		<a href="https://www.baidu.com">百度</a>
		<!--通过 display: inline-block;就可以将行内标签转为行内块级标签-->
		<a href="https://www.baidu.com">百度一下</a>
		<div>我是div1</div>
		<!--这个是一般的块级标签，会上下分行-->
		<div>我是div2</div>
	</body>
</html>

在这里插入图片描述
代码示例3：将块级标签转换为行内标签

<html>
	<head>
		<title>块级标签转行内标签</title>
		<style type="text/css">
			div {
				width: 100px;
				height: 100px;
				background-color: red;
				display: inline;
			}
		</style>
	</head>
	<body>
		<div>谷歌</div>
		<!--按道理div是块级可以设置长和宽当通过display: inline;它已经是行内标签了，所以长和宽失效-->
		<div>https://www.google.com</div>
	</body>
</html>

在这里插入图片描述
各个标签之间的区别：

块标签：独自占领一行、可以进行宽高的数值的设定；
行标签：在一行内显示、不可以进行宽高的数值设定；
行内块标签：能和其他元素待在一行，能设置宽高；

嵌套规则：

块标签可以套行标签，行标签不可以套块标签；
P标签不要套块属性标签，可以套a，span，文本；
嵌套的时候注意代码的缩进；

4、页面定位

页面元素的定位方式有两种：

相对定位：默认方式第一个元素参照原点，后来的元素参照之前的元素；
绝对定位：所有元素只参照原点位置，元素之间相互不参照；

position:relative; 相对定位
position:absolute; 绝对定位

如果选用了绝对定位：我们可以设置元素距离原点的上下左右位置；

top
left
right
bottom

如果用的是相对定位，要设置元素之间的间距，用：

margin-top
margin-left
margin-right
margin-bottom

注意：

1、上下间距CSS属性比如：margin-top、margin-left 对行标签不起作用；
2、块标签：上下左右的间距属性都会起作用；

5、选择器

选择器就是选中一个或多个标签的一种语法；
CSS与HTML结合的样式中，除了内联样式，内部样式和外部样式都需要配合选择器进行设置；

id选择器（ID selector，IS）

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式；
HTML元素以id属性来设置id选择器，CSS 中 id 选择器以 “#” 来定义。
ID 选择器：CSS中使用 # 选中该标签，首先要给HTML元素加一个id属性，属性名必须遵循Java的命名规范，需要注意的是：id必须是唯一的，多个标签的id值不要相同；
也就是说，id选择器一次只能控制一个标签；

语法格式：

#S{...}（S为选择器名）

例：id为name的标签会匹配下面的样式

<style>
#name{
  color:red;
}
</style>
<!--下面文字是红色的-->
<p id="name">red text</p>

类选择器（class selector，CS）

如果我想控制很多个h1标签，我给所有的h1标签添加class属性，它们的值都是一样的，这意味着把它们归为一类；

语法格式：

.S{...}（S为选择器名）

例：class属性值为value的标签会匹配下面的样式

<style>
.value{
  text-align:center;
}
</style>
<!--下面的文字是居中对齐的-->
<p class="value">center text</p>

也就是说，class标签可以一次控制多个标签元素；
类选择器使用.来选中标签，使用这个.来对class属性为value的值进行控制；
综上所述，共性部分可用类选择器抽取出来，id选择器控制单个元素，如果是它们之间有了冲突怎么办？这个涉及到选择器的优先级；

代码示例：

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.myh1{
				color: #FF0000;
				font-size: 30px;
				font-family: 楷体;
			}
		</style>
	</head>
	<body>
		<h1 class="myh1">这是h1标签下的文字</h1>
		<h1 class="myh1">这是h1标签下的文字</h1>
	</body>
</html>

在这里插入图片描述

这里的class属性一次控制了两个元素；

标签名选择器

标签名选择器也叫做CSS 元素选择器；
直接写标签名就可以，一次可以控制很多个相同的标签；

语法格式：

S{...}（S为选择器名）

例：所有的p标签都会匹配以下的样式

<style>
p{
  font-style:italic;
}
</style>
<!--下面的文字是斜体的-->
<p style="font-style:italic">italic text</p>

在这里插入图片描述

类型选择器匹配文档语言元素类型的名称，类型选择器匹配文档树中该元素类型的每一个实例；

选择器的优先级

多个选择器选中了同一个标签，控制的样式如果没有冲突，就会叠加生效；如果有冲突，就根据选择器的优先级来决定，优先级高的选择器控制强度就比较大；
优先级的顺序为：

内联样式>Id选择器>类选择器=属性选择器=伪类选择器>标签名选择器=伪元素选择器；

同级选择器一起出现的话，按照渲染的顺序，放在最后的把放在最前的覆盖了；

伪类选择器

伪类选择器最初是针对a标签的，他就是用于选择状态的，因为超链接的标签有4种选择状态：链接状态、鼠标悬浮状态、鼠标访问状态、链接访问过后的状态；

代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* 伪类选择器，最初就是针对a标签的 伪类选择器就是选择状态的 */
			a:link {
				color: #FF0000;
				/* 线条的样式 none 不要线条  underlinex下划线 line-through 删除线 overline 上划线*/
				text-decoration: none;
			}

			a:hover {
				color: aqua;
				font-size: 50px;
				text-decoration: none;
			}

			a:active {
				color: yellow;
				font-size: 220px;
				text-decoration: none;
			}

			a:visited {
				color: blue;
				text-decoration: none;
			}
		</style>
	</head>
	<body>
		<!-- 超链接标签有四种状态
		 1.链接状态
		 2.鼠标悬浮状态
		 3.鼠标按下状态
		 4.链接访问过后的状态
		 其中 鼠标悬浮状态 鼠标按下状态 这两种状态对于其他标签，也是有用的
		 -->
		<a href="#">看下效果</a>
		<a href="http://www.baidu.com">进入百度</a>
	</body>
</html>

注意：有的浏览器可能不支持部分状态，上面测试我是在IE浏览器完成的，四种状态都可以支持；

链接怎么设置成为没有下划线？

text-decoration: none;----------这个是取消下划线的意思
text-decoration: underline;------------默认是underline

其中，鼠标悬浮状态、鼠标按下状态对其他标签也是起作用的；

包含选择器

后代选择器（descendant selector）又称为包含选择器，后代选择器可以选择作为某元素后代的元素；
在后代选择器中，规则左边的选择器一端包括两个或多个用空格分隔的选择器。选择器之间的空格是一种结合符（combinator）。每个空格结合符可以解释为“… 在 … 找到”、“… 作为 … 的一部分”、“… 作为 … 的后代”，但是要求必须从右向左读选择器；

代码示例：

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div h1 span{
				font-size: 30px;
				font-family: 楷体;
				color: cadetblue;
			}
		</style>
	</head>
	<body>
		<div id="d1">
			<h1>
				<span>
					你好，这是一个写在很多个HTML标签中的文字
				</span>
			</h1>
		</div>
	</body>
</html>

在这里插入图片描述

如果下面有一个一摸一样的结构，你不想让那个他也被选中，你可以通过给div添加不同的id，然后进行包含选择器选中；

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#d1 h1 span{
				font-size: 30px;
				font-family: 楷体;
				color: cadetblue;
			}
		</style>
	</head>
	<body>
		<div id="d1">
			<h1>
				<span>
					你好，这是一个写在很多个HTML标签中的文字
				</span>
			</h1>
		</div>
		<div id="d2">
			<h1>
				<span>
					你好2，这是一个写在很多个HTML标签中的文字
				</span>
			</h1>
		</div>
	</body>
</html>

在这里插入图片描述

如果是不同标签想拥有同样的属性，可以写成：

标签名1，标签名2，标签名3{
	……
}

并列，使用,隔开；

子选择器

如果你不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器（Child selector）；
例如，如果你希望选择只作为 h1 元素子元素的 strong 元素，可以这样写：

h1 > strong {color:red;}

这个规则会把第一个 h1 下面的两个 strong 元素变为红色，但是第二个 h1 中的 strong 不受影响：

<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>

层叠样式表具有继承性，里面的子标签没有单独设置样式，它就会继承父元素的样式；

代码示例：

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			ul>li{
				color: red;
			}
			#d1{
				color:greenyellow;
				font-size: 30px;
			}
			#sp{
				color: #0000FF;
			}
			#d2 >div>#sp1{
				color: #00FFFF;
			}
		</style>
	</head>
	<body>
		<ul>
			<li><span>assdfasdfasf</span></li>
			<li>asdfasdfasf</li>
			<li>asdfasdfasf</li>
			<li>asdfasdfasf</li>
			<li>asdfasdfasf</li>
		</ul>
		
		<div id="d1">
			<!-- 子标签没有单独去设置样式，会继承父标签的样式 -->
			<span id="sp">abc</span>
		</div>
		
		<div id="d2">
			<div id="">
				abc
			</div>
			<div id="">
				<span>
					dddddddddddddddddddddddddd
				</span>
			</div>
			<div id="">
				cccccccccccc
			</div>
			<div id="">
				ccccccccccc
				<span id="sp1">
					dddddddddddddddddddddddddd
				</span>
			</div>
		</div>
	</body>
</html>

在这里插入图片描述

相邻选择器

如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。
例如，如果要增加紧接在 h1 元素后出现的段落的上边距，可以这样写：

h1 + p {margin-top:50px;}

这个选择器读作：“选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素”；

相邻兄弟选择器使用了加号（+），即相邻兄弟结合符（Adjacent sibling combinator）。
与子结合符一样，相邻兄弟结合符旁边可以有空白符。
请看下面这个文档树片段：

<div>
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ul>
  <ol>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ol>
</div>

在上面的片段中，div 元素中包含两个列表：一个无序列表，一个有序列表，每个列表都包含三个列表项。这两个列表是相邻兄弟，列表项本身也是相邻兄弟。不过，第一个列表中的列表项与第二个列表中的列表项不是相邻兄弟，因为这两组列表项不属于同一父元素（最多只能算堂兄弟）。

请记住，用一个结合符只能选择两个相邻兄弟中的第二个元素。

请看下面的选择器：

li + li {font-weight:bold;}

上面这个选择器只会把列表中的第二个和第三个列表项变为粗体。第一个列表项不受影响。

代码示例：

需求是：移上d1控制d2；

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* #d1:hover+#d2 {
				color: red;
			} */
			/* 或者是下面这种： */
			#d1:hover+div{
				color: red;
			}
		</style>
	</head>
	<body>
		<div id="d1">
			这是第一个div
		</div>
		<div id="d2">
			这是第二个div
		</div>
	</body>
</html>

注意：如果下面还有div，你肯定不能控制了，只能控制着一个，如果我们就像控制很多个，我们可以使用相邻所有选择器；
#d1:hover~div

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#d1:hover~div{
				color: #FF0000;
			}
		</style>
	</head>
	<body>
		<div id="d1">
			这是第一个div
		</div>
		<div id="d2">
			这是第二个div
		</div>
		<div id="d3">
			这是第三个div
		</div>
	</body>
</html>

通配符选择器

*代表通配符，匹配所有，这个指的是全局通配，一般来说，我们不需要全局通配，可以局部通配；

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#d1 >*{
				color: red;
			}
		</style>
	</head>
	<body>
		<div id="d1">
			这是一个div标签
			<div id="">
				这是内部的div标签
			</div>
			<span>
				这是一个行标签
			</span>
		</div>
		
		<span>这是外部的行标签</span>
		<h1>这是h1标签</h1>
	</body>
</html>

在这里插入图片描述

属性选择器

属性选择器可以根据元素的属性及属性值来选择元素，如果希望选择有某个属性的元素，而不论属性值是什么，可以使用简单属性选择器。
如果想把包含标题（title）的所有元素变为红色，可以写作：

*[title] {color:red;}

<html>
	<head>
		<meta charset="utf-8">
		<title>
			我的网站
		</title>
		<style type="text/css">
			*[title]{
				color: red;
			}
		</style>
	</head>
	<body>
		<h1 title="">这是一行文字</h1>
		<h2>这是第二行文字</h2>
	</body>
</html>

在这里插入图片描述

注意：即使你的这个title属性中什么都不写，只要有这个标签，他就会选中；

与上面类似，可以只对有 href 属性的锚（a 元素）应用样式：

a[href] {color:red;}

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			a[href]{
				color: #ADFF2F;
			}
		</style>
	</head>
	<body>
		<a href="http://www.baidu.com">进入百度</a>
	</body>
</html>

在这里插入图片描述

还可以根据多个属性进行选择，只需将属性选择器链接在一起即可；

为了将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色，可以这样写：

a[href][title] {color:red;}

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			a[href][title]{
				color: #ADFF2F;
			}
		</style>
	</head>
	<body>
		<a href="http://www.baidu.com" title="">进入百度</a>
		<a href="http://www.baidu.com">进入百度2</a>
	</body>
</html>

在这里插入图片描述

如果这个属性是有值存在的，也可以给出属性名=值：

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			a[title='nihao']{
				color: #ADFF2F;
			}
		</style>
	</head>
	<body>
		<a href="http://www.baidu.com" title="nihao">进入百度</a>
	</body>
</html>

在这里插入图片描述

6、布局技巧

之前学习HTML当中，我们使用表格进行布局，现在可以采用div+CSS来布局；

浮动属性

所谓浮动，就是让块标签一字排开：

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				float: left;
				border: 1px black solid;
				width: 20px;
				height: 20px;
				margin-left: 20px;
			}
		</style>
	</head>
	<body>
		<div>1</div>
		<div>2</div>
		<div>3</div>
		<div>4</div>
		<div>5</div>
	</body>
</html>

在这里插入图片描述

如果我现在的需求是：前四个浮动，但是不想让第五个也浮动上去，代码怎么写？

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.mydiv{
				float: left;
				border: 1px black solid;
				width: 20px;
				height: 20px;
				margin-left: 20px;
			}
		</style>
	</head>
	<body>
		<div class="mydiv">1</div>
		<div class="mydiv">2</div>
		<div class="mydiv">3</div>
		<div class="mydiv">4</div>
		<div style="clear: both;"></div>
		<div class="mydiv">5</div>
	</body>
</html>

在这里插入图片描述

可以添加一个空标签，设置内联样式为：清除浮动；

clear属性中可能的值：

在这里插入图片描述

布局页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			html,
			body {
				padding: 0;
				margin: 0;
			}

			#gd {
				left: 0px;
				top: 200px;
				height: 100px;
				width: 200px;
				background: #5F9EA0;
				/* 固定的关键代码 */
				position: fixed;
			}

			#hf {
				width: 100%;
				height: 100px;
				border: 1px black solid;
				/* 给定横幅的图片路径 */
				background-image: url;
				/* 保证图片展示完全 */
				background-size: 100% 100%;
			}
			
			#dh{
				width: 100%;
				height: 80px;
				border: 1px black solid;
				margin-top: 10px;
			}
			
			#zt{
				width: 100%;
				height: 200px;
				border: 1px black solid;
				margin-top: 10px;
			}
			
			#bq{
				width: 100%;
				height: 400px;
				border: 1px black solid;
				margin-top: 10px;
				background-color: #00FFFF;
			}
			
			.btn{
				font-size: 15px;
				height: 40px;
				width: 100px;
				border: 1px black solid;
				margin-left: 11%;
				margin-top: 20px;
				float: left;
				/* 文本对齐方式 */
				text-align: center;
				/* 设置行高 */
				line-height: 40px;
				/* 边框弧度 */
				border-radius: 5px;
				/* 阴影：4个值分别代表 左右位置 上下位置 阴影范围 阴影颜色  */
				
				box-shadow: 5px 5px 10px grey;
			}
			
			.zhuti{
				height: 200px;
				border: 1px black solid;
				float: left;
				background-color: red;
			}
			
			#zt1{
				width: 25%;
			}
			
			#zt2{
				width: 40%;
				margin-left: 5%;
			}
			
			#zt3{
				width: 25%;
				float: right;
				margin-right: -2px;
			}
		</style>
	</head>
	<body>
		<div id="gd">
			固定的一个层
		</div>

		<div id="hf">
			横幅
		</div>

		<div id="dh">
			<div class="btn">
				<a href="#">关于我们</a>
			</div>
			<a href="#">
				<div class="btn">
					与我联系
				</div>
			</a>

			<div class="btn">
				课程介绍
			</div>
			<div class="btn">
				视频下载
			</div>
			<div class="btn">
				来往路线
			</div>
		</div>

		<div id="zt">
			<div id="zt1" class="zhuti">左</div>
			<div id="zt2" class="zhuti">中</div>
			<div id="zt3" class="zhuti">右</div>
		</div>

		<div id="bq">
			版权栏
		</div>
	</body>
</html>

效果图为：
在这里插入图片描述
关于固定页面的position属性可能的值：

7、关于字体的CSS属性

颜色的取值

颜色的取值有四种：英文单词、十六进制地址值、rgb三原色进行配比（0~255）【类似于：rgb(0,0,0)】、rgba(0，0，0，0.8)【最后一个值是透明度】；

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				width: 200px;
				height: 100px;
				float: left;
				border: 1px black solid;
			}
			
			#one{
				background-color: orange;
			}
			
			#two{
				background-color: #5F9EA0;
			}
			
			#three{
				background-color: rgb(0,0,0);
			}
			
			#four{
				background-color: rgba(170, 0, 255, 0.8);
			}
		</style>
	</head>
	<body>
		<div id="one">
			
		</div>
		<div id="two">
			
		</div>
		<div id="three">
			
		</div>
		<div id="four">
			
		</div>
	</body>
</html>

在这里插入图片描述

关于字体

font-size:150px;--------不一定只能写px,还可以给pt、mm、cm;
font-family:字体，电脑上有的字体都可以
font-style:字体样式
font-weight:文字加重

文本阴影

在这里插入图片描述

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			h1{
				text-shadow: 2px 2px 1px #5F9EA0;
			}
		</style>
	</head>
	<body>
		<h1>这是一行文字</h1>
	</body>
</html>

在这里插入图片描述

8、禁止背景重复

如果刚开始你添加一张图片给整个页面，图片不够大的时候他会一直重复该图片，那如果我还不想让他重复，有属性：

background-repeat

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

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body{
				background-image: url(img/360.png);
				background-repeat: no-repeat;
			}
		</style>
	</head>
	<body>
	</body>
</html>

添加完该属性之后：
在这里插入图片描述

background-repeat属性的一些值：

如果你下面还有其它元素存在，height很大，那你就会发现一拉滚动条，你的整个背景都不能固定，怎么让他一直固定；

之前的效果：
在这里插入图片描述
添加完属性之后

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body{
				background-image: url(img/360.png);
				background-repeat: no-repeat;
				/* 默认是scroll可以滚动的，调整为固定的的 */
				background-attachment: fixed;
			}
			
			#d1{
				width: 500px;
				height: 800px;
				border: 1px black solid;
			}
		</style>
	</head>
	<body>
		<div id="">
			
		</div>
		
		<div id="d1">
			背景图片是固定的。尝试向下滚动页面。
			
			背景图片是固定的。尝试向下滚动页面。
			
			背景图片是固定的。尝试向下滚动页面。
			
			背景图片是固定的。尝试向下滚动页面。
			
			背景图片是固定的。尝试向下滚动页面。
			
			背景图片是固定的。尝试向下滚动页面。
			
			背景图片是固定的。尝试向下滚动页面。
			
			背景图片是固定的。尝试向下滚动页面。
			
			背景图片是固定的。尝试向下滚动页面。
			
			背景图片是固定的。尝试向下滚动页面。
			
			背景图片是固定的。尝试向下滚动页面。
			
			背景图片是固定的。尝试向下滚动页面。
			
			背景图片是固定的。尝试向下滚动页面。
			
			背景图片是固定的。尝试向下滚动页面。
			
			背景图片是固定的。尝试向下滚动页面
		</div>
	</body>
</html>

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

9、边框属性

之前写边框属性的时候都是很多个属性值一次性给出，本质上是可以分开的：

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div {
				height: 300px;
				width: 300px;
				/* border: 1px black solid; */
				border-width: 5px;
				border-color: red;
				border-style: solid;
				border-top-color: green;
				border-right-width: 15px;
				border-bottom-style: dotted;
				border-left-style: double;

			}
		</style>
	</head>
	<body>
		<div id="">

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

在这里插入图片描述
属性值：

将属性拆分写更好控制；

制作一个照片墙：

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body {
				background: pink;
			}

			div {
				height: 400px;
				width: 250px;
				border-color: white;
				border-width: 20px;
				border-style: solid;
				border-bottom-width: 30px;
				float: left;
				margin-left: 100px;
				box-shadow: 10px 10px 5px gray;
			}

			#d1 {
				background-image: url(img/girl1.jpg);
				background-size: 100% 100%;
				transform: rotate(45deg);
				transition: transform 1s;
			}

			#d1:hover {
				transform: rotate(15deg);
				transition: transform 1s;
			}

			#d2 {
				background-image: url(img/girl2.jpg);
				background-size: 100% 100%;
				transform: rotate(15deg);
				transition: background-size 1s;
			}

			#d2:hover {
				background-size: 110% 110%;
				transition: background-size 1s;
			}

			#d3 {
				background-image: url(img/girl3.jpg);
				background-size: 100% 100%;
				filter: grayscale(80%);
				filter: gray;
				transform: rotate(-45deg);
				transition: all 1s;
			}

			#d3:hover {
				filter: grayscale(0%);
				filter: gray;
				transform: rotate(45deg);
				transition: all 1s;
			}

			#d4 {
				margin-left: 100px;
				margin-top: 30px;
				background-image: url(img/girl4.jpg);
				background-size: 100% 100%;
				filter: grayscale(80%);
				filter: gray
			}

			#d5 {
				margin-top: 30px;
				background-image: url(img/girl5.jpg);
				background-size: 100% 100%;
			}
		</style>
	</head>
	<body>
		<div id="d1">

		</div>
		<div id="d2">

		</div>
		<div id="d3">

		</div>
		<div id="d4">

		</div>
		<div id="d5">

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

10、关于设置间距的问题

设置外间距是margin，设置内间距是padding；
有时候会发现我们设置内层的margin-top，他会把外层也拖动，拉下去，这个时候需要我们站在外层的角度设置内间距，距离里面有多少，但是你发现他又会把外框撑大，这不是我们想要的效果，怎么办？加一个属性：box-sizing:border-box;

11、百度图片网站

在这里插入图片描述

百度图片网站里面的图片，当我们的鼠标移上去，会出现一个新的层，原理是先隐藏，后鼠标以上之后展现出来的样式；

关于CSS的overflow属性：
在这里插入图片描述

<title></title>
		<style type="text/css">
			#wai{
				width: 500px;
				height: 350px;
				background: url(img/bb.png);
				background-size: 100% 100%;
				/* 溢出层的范围就隐藏 */
				overflow: hidden;
				transition:background-size 0.5s ;
			}
			#nei{
				width:100%;
				height: 50px;
				background: rgba(0,0,0,0.5);
				margin-top: 350px;
				color: white;
				transition:margin-top 0.5s ;
			}
			#wai:hover>div{
				margin-top: 300px;
				transition:margin-top 0.5s ;
			}
			#wai:hover{
				background-size: 110% 110%;
				transition:background-size 0.5s ;
			}
		</style>
	</head>
	<body>
		<div id="wai">
			<div id="nei">
				点击进入
			</div>
		</div>
	</body>
</html>

在这里插入图片描述

非常巧妙的用到了站在里层设置外层，利用这个点弹出隐藏的层；

12、text-transform 属性

转换不同元素中的文本：

代码示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title> 
<style>
	p.uppercase {text-transform:uppercase;}
	p.lowercase {text-transform:lowercase;}
	p.capitalize {text-transform:capitalize;}
</style>
</head>

<body>
	<p class="uppercase">This is some text.</p>
	<p class="lowercase">This is some text.</p>
	<p class="capitalize">This is some text.</p>
</body>
</html>