JAVAWEB之css

最新推荐文章于 2023-07-07 21:28:43 发布

MlSAKA

最新推荐文章于 2023-07-07 21:28:43 发布

阅读量249

点赞数

分类专栏： web相关文章标签： java web css html

本文链接：https://blog.csdn.net/weixin_38132536/article/details/73555243

版权

web相关专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1.css使用方式：

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css</title>
<!--外部样式：建立后缀为css的文件存储css代码在html中导入该文件-->
<link href="123.css" rel="stylesheet"><link/>
</head>
<style type="text/css">
a{
	/*内部样式：使用style的标签进行css控制，css内容写在style标签体内*/
	font-size:24px;/*字号*/
	font-style:italic;/*斜体文字*/
	}
</style>
<body>
<a href="新建文本文档 (2).txt"> wenben</a><br/>
<!--行内样式：使用标签的style属性对css进行控制，css内容写在标签体内-->
<a href="member.py" style="font-size:16px; color:#00F"">超链接</a><br/>
<a href="crack.py">外部链接</a>
</body>
</html>

2.css选择器：

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css语法</title>
<style>
div{
	background-color:#999;
	font-size:18px;
	color:#FF0;
	}
/*类选择器：选择的标签必须有class属性且不能同名，类选择器优先于标签选择器*/
.a{
	color:#F00;
	font-family:"Courier New", Courier, monospace;
	font-size:36px;
	}
/*id选择器：标签中必须有id属性，优先级最高*/
#d{
	font:"Arial Black", Gadget, sans-serif;
	font-size:9px;}
/*并集选择器：多个标签中的css内容相同时，可用此合并*/
.e,#q{
	color:#639;
	font-size:16px;
	}
/*交集选择器：选择div c中的span标签*/
.a span{
	background:#0FF;
	font:"Times New Roman", Times, serif;
	color:#000;}
</style>
</head>

<body>
<!--选择器：需要添加css样式的标签-->
<div>long may the sunshine</div>

<div class="a">prise sunshine!!</div><br>
<div id="d">fired in dark</div>
<div class="e">long may the sunshine</div>
<div id="q">long may the sunshine</div>
<div class="a">
<span>java</span>
python
</div>
</body>

3.通用选择器：

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>通用选择器</title>
<style type="text/css">
/*通用选择器:其中的标签有四种状态：link（没有被访问过） hover（鼠标经过的状态） active（鼠标按下但没有松开的状态） visited（已经被访问过的状态）*/
/*注：在css中，对于同一个类或者id，hover必须置于link和visited之后才是有效的
     active必须置于hover之后才是有效的*/
.a:hover{
	background:#666;
	color:#0FF;}
#start:visited{
	 font-size:24px;
	 background-color:#39F;}
#start:active{
	background:#0F0;
	color:#000;}
</style>
</head>

<body>
<ul>
<li>育碧</li>
<li>EA</li>
<li>Steam</li>
<table border="1px" width="400px" height="200px" align="center">
		<caption>愿望单</caption>
		<thead>
		<tr align="center" class="a">
			<th>育碧</th>
			<th>光荣</th>
			<th>卡普空</th>
		</tr>
		</thead>
		<tbody>
		<tr align="center" class="a">
			<td>刺客信条：大革命</td>
			<td>真三</td>
			<td>鬼泣Devil may cry</td>
		</tr>
		<tr align="center" class="a">
			<td>看门狗2</td>
			<td>死或生5</td>
			<td>生化危机7</td>
		</tr>
		<tr align="center" class="a">
			<td>刺客信条：兄贵会</td>
			<td>奶排3</td>
			<td>黑魂3</td>
		</tr>
		</tbody>
	</table>
</ul>
</body>

4.常用css属性值：

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>常用css属性和值</title>
<style type="text/css">
body{
	color:#069;/*字体颜色*/
	letter-spacing:10px;/*字符间距*/
	text-align:center;/*对齐方式*/
	text-decoration:underline;/*文本修饰：下划线*/
	word-spacing:30px;/*单词间距*/

	font-size:18px;/*字体大小*/
	font-style:italic;/*字体样式：斜*/
	font-weight:bold;/*字体宽度：加粗*/
	
	background-color:#CCC;/*背景颜色*/
	background-image:url(2b/62334369_p0.jpg);/*背景图片*/
	/*设置背景图片是否重复，或如何重复
				not-repeat: 不重复
				repeat-x: x轴重复
				repeat-y: y轴重复
				repeat: x和y轴重复(默认)
	*/
	background-repeat:no-repeat;
	background-position:top center;
	}
</style>
</head>

<body>
long may the sunshine!!
</body>

5.css列表和表格：

<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(M1SAKA/start.jpg);
	}
body{
	background-image:url(../2b/62334369_p0.jpg);
	background-repeat:no-repeat;
	color:#309;
	}
	/*css表格及边框:*/
table{
	border-collapse:collapse;/*合并表格边框*/
	border-color:#09F;/*边框颜色*/
	border-width:10px;/*边框宽度*/
	border-style:double;/*边框样式：双实线*/
	}
</style>
</head>

<body>
<ul>
<li>育碧</li>
<li>EA</li>
<li>Steam</li>
<table border="1px" width="400px" height="200px" align="center">
		<caption>愿望单</caption>
		<thead>
		<tr align="center">
			<th>育碧</th>
			<th>光荣</th>
			<th>卡普空</th>
		</tr>
		</thead>
		<tbody>
		<tr align="center">
			<td>刺客信条：大革命</td>
			<td>真三</td>
			<td>鬼泣Devil may cry</td>
		</tr>
		<tr align="center">
			<td>看门狗2</td>
			<td>死或生5</td>
			<td>生化危机7</td>
		</tr>
		<tr align="center">
			<td>刺客信条：兄贵会</td>
			<td>奶排3</td>
			<td>黑魂3</td>
		</tr>
		</tbody>
	</table>
</ul>
</body>

6.盒子模型：

<body>
这是一个盒子，可以把所有标签都看成一个盒子，通过改变盒子的相关属性来改变标签<br>
宽度和高度：决定这个盒子的容量<br>
盒子的内边距：盒子边框与内容的距离<br>
边框：盒子的厚度<br>
外边距：盒子与盒子之间的距离
</body>

7.css定位：相对定位：relative（相对自己之前的位置）
绝对定位：abosolute（相对父标签的位置）
固定定位：fixed(相对浏览器位置固定，不随着滚动条的拖动而位置改变)

MlSAKA

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JAVAWEB之css

1.css使用方式：cssa{ /*内部样式：使用style的标签进行css控制，css内容写在style标签体内*/ font-size:24px;/*字号*/ font-style:italic;/*斜体文字*/ } wenben超链接外部链接2.css选择器：css语法div{ background-color:#999; font-size
复制链接

扫一扫