css--【DRP】

最新推荐文章于 2024-11-10 11:53:38 发布

weixin_30344131

最新推荐文章于 2024-11-10 11:53:38 发布

阅读量106

点赞数

文章标签：人工智能嵌入式

原文链接：http://www.cnblogs.com/wangmei/p/4934159.html

版权

CSS

Cascading Style Sheets

　　层叠样式表是一种用来表示HTML或者XML等文件样式的计算机语言。

CSS和HTML的区别

HTML用于结构化内容；css用于格式化结构化的内容。

css是用来装饰HTML的

作用

让网页表现与内容分离的一种样式设计语言。CSS能够对网页中的对象的位置排版进行像素集的精确控制。

详细：1.一个样式表可以控制多个文档布局，精确。

2.可以灵活的更换，比较方便。

分类

　　外联式：网页链接到外部样式表中－－作用域：好多个html的样式控制

<html>
    <head>
        <title>外部样式表（将css单独放到一个文件中）</title>
        <link rel="stylesheet" style="text/css" href="test_css.css"/>
    </head>
    <body >
        这是一个红色的页面。
    </body>
</html>

　　嵌入式：在网页上创建嵌入的样式表--作用域：同一个页面的多个元素的控制

<html>
    <head>
        <title>内部样式表（html中的style标签）</title>
        <style type="text/css">
            body{
                background:red;
            }
        </style>
    </head>
    <body >
        这是一个红色的页面。
    </body>
</html>

　　内联式：应用内嵌样式到各个网页元素--作用域：个别的控制

<html>
    <head>
        <title>行内样式表</title>
    
    </head>
    <body style="background:red;">
        
    </body>
</html>

这是一个从普通到特殊的过程，也是一个从宏观到个性化的过程，CSS涵盖了很多知识。所以优先级是ID选择器>类选择器>标签选择器

CSS语法

三种：选择器、属性、值

标签选择器：例如p{}

类选择器：.student{}

ID选择器：#student{}

CSSdemo

颜色与背景

color:颜色

background-color:背景色

background-image:背景图片

background-repeat:是否重复

background：背景

<html>
	<head>
		<title>css示例-颜色与背景</title>
		<style type="text/css">
	/*
	CSS写的复杂的样子
	body{
			background-image:url(https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3580210867,3098509580&fm=116&gp=0.jpg);		
			background-repeat: repeat-y;
	
		}
*/
  
	body{
			background:url(https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3580210867,3098509580&fm=116&gp=0.jpg)	repeat-y;
	
		}

		</style>
	</head>
	
	<body>
		背景是一个图片
	</body>
	
</html>

<html>
	<head>
		<title>css示例-颜色与背景</title>
		<style type="text/css">
		h1{
			color:#FF0099
		}
		
		h2{
			color:#FF0000
		}
		
		</style>
	</head>
	<body>
		<h1>color测试</h1>
		<h2>color测试</h2>
	</body>
	
</html>

链接

伪类：pseudo-class,令你可以再为HTML元素定义CSS属性的时候将条件和事件考虑在内。

<html>
	<head>
		<title>css示例-链接-伪类</title>
		<style type="text/css">
			/*
				link:将从未访问过的连接设置为红色
				visited:已经访问过的连接设置为绿色
				active:将得到焦点的链接设置为黄色
				hover:鼠标悬停在链接上，设置为蓝色
			*/
			a:link{
				color:red;
			}
			a:visited{
				color:green;
			}
			a:active{
				color:yellow;
			}
			a:hover{
				color:blue;
			}
		</style>
	</head>
	<body>
		<a href="#">helloworld<br></a>
	</body>
	
</html>

字体

font-family：字体

font-style：文本样式

font-size:字号

font:字体

<html>
	<head>
		<title>css示例-颜色与背景</title>
		<style type="text/css">
			table{
				font-family:黑体;
				font-size:large;
				font-style:italic;
			}
		</style>
	</head>
	<body>
		<table border="1">
			<tr>
				<td>用户代码</td>
				<td>用户名称</td>
			</tr>
			<tr>
				<td>001</td>
				<td>akk</td>
			</tr>
			<tr>
				<td>002</td>
				<td>wm</td>
			</tr>
		</table>
	</body>
	
</html>

文本

text-decoration:是否有下划线，加粗，倾斜等

text-transform:转换大小写

text-align:居中

<html>
	<head>
		<title>css示例-文本</title>
		<style type="text/css">
			p{
				text-decoration:underline;
				letter-spacing:20px;
				text-transform:uppercase;
			}
		</style>
	</head>
	<body>
		<p>
			abc
		</p>
	</body>
	
</html>

表格

border:宽度

border-collapse:边框是否合并为一条

<html>
	<head>
		<title>css示例-边框</title>
		<style type="text/css">
		/*表格宽度为1px,实线，黑色*/
			table{
				border:1px solid black;
				border-collapse;
			}
			td{
				border:1px solid black;
				border-collapse:collapse;
			}
			tr{
				text-align:center;
				 font-family:黑体;
			}
		</style>
	</head>
	<body>
		<table border="1" width="70%">
			<tr id="mytitle">
				<td>用户代码</td>
				<td>用户名称</td>
			</tr>
			<tr>
				<td>001</td>
				<td>张三</td>
			</tr>
		</table>
	</body>
	
</html>