CSS

最新推荐文章于 2022-11-25 14:52:08 发布

「已注销」

最新推荐文章于 2022-11-25 14:52:08 发布

阅读量145

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/Y__J___/article/details/102524028

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

css

1.什么是css，有什么作用？

css（Cascading Style Sheet）：层叠式表语言

css的作用是：

修饰HTML页面，设置HTML页面中的某些元素样式，让HTML页面更加好看。

css好比是HTML的化妆品一样

HTML还是主体，css依赖HTML。scc的存在就是修饰HTML，所以新建的文件还是xx.html文件

2.css我们要求掌握到什么程度？

常见的css样式要求会写。

别人写的css样式要能看懂。

3.在HTML页面中嵌套使用css的三种方式：

第一种方式：在标签内部使用style属性来设置元素的css样式，这种方式成为内联定义方式。

语法格式：

<标签 style=“样式名:样式值; 样式名:样式值; …”></标签>

第二种方式：在head标签中使用style块，这种方式被称为样式块方式

语法格式：

    <head>
        <style type="text/css">
            选择器{
                样式名:样式值;
                样式名:样式值;
                ......
            }
            选择器{
                样式名:样式值;
                样式名:样式值;
                ......
            }
        </style>		    
    </head>

第三种方式：链入外部样式文件，这种方式最常用。（将样式写到一个独立的xxx.css文件只中，在需要的网页上直接引入css文件，样式就引入了）
语法格式：

	<link type="text/css" rel="stylesheet" href="css文件的路径" />

这种方式易维护，维护成本较低。

测试代码：

a{
    text-decoration: none;
}

#baiduSpan{
	text-decoration: underline;
	cursor: pointer;
}

HTML引入css的三种方式

<!doctype html>
<html>
	<head>
		<title>HTML中引入css样式中的第一中方式：内联定义方式</title>
	</head>
	<body>
        <!--
			width 宽度样式
			height 高度样式
			background-color 背景色样式
			display 布局样式（none表示隐藏，block表示显示）
		-->
		<div style="width: 300px; height: 300px; background-color: #CCFFFF; display: none; border-color: red; border-width: 1px; border-style: solid;">	
		</div>
        <br><br>
        <!--
			样式可以这样写
				block：样式1 样式2 样式3
		-->
        <div style="width: 300px; height: 300px; background-color: #CCFFFF; display: block; border: 1px solid black;">
        </div>
	</body>
</html>



<!doctype html>
<html>
	<head>
		<title>HTML中引入css样式中的第二种方式：样式块</title>
        <style type="text/css">
            /*
            	这是css的注释
            */
            /*
            	id选择器
            	语法格式：
					#id{
            			样式名：样式值；
            			样式名：样式值；
            			样式名：样式值；
            			......
            		}
            */
            #usernameErrorMsg {
                color: red;
                font-size: 12px;
            }
            /*
            	标签选择器
            		语法格式：
            			标签名{
            				样式名：样式值；
            				样式名：样式值；
            				样式名：样式值；
            				......
            			}
            	标签选择器作用的范围比id选择器广
			*/
        div{
            background-color: black;
            border: 1px solid red;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <!--设置样式字体大小为12px，颜色为红色-->
    <span id="usernameErrorMsg">对不起，用户名不能为空！</span>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>在HTML中使用css第三种样式：引入独立外部css文件</title>
		<link rel="stylesheet" type="text/css" href="1.css"/>
	</head>
	<body>
		<a href="http://www.baidu.com">百度</a>
		<span id="baiduSpan">点击我连接到百度哦！</span>
	</body>
</html>

列表样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>列表样式</title>
		<style type="text/css">
			ul{
				list-style: none;
			}
		</style>
	</head>
	<body>
		<ul>
			<li>中国
				<ul>
					<li>北京</li>
					<li>上海</li>
					<li>重庆</li>
				</ul>
			</li>
			<li>美国</li>
			<li>俄国</li>
		</ul>
	</body>
</html>

css样式的绝对定位

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>css样式的绝对定位</title>
		<style type="text/css">
			#div1{
				background-color: red;
				border: 1px black solid;
				width: 300px;
				height: 300px;
				position: absolute;/*绝对定位*/
				left: 100px;
				top: 100px;
			}
		</style>
	</head>
	<body>
		<div id="div1">
			
		</div>
	</body>
</html>

「已注销」

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS

css 1.什么是css，有什么作用？ css（Cascading Style Sheet）：层叠式表语言 css的作用是：修饰HTML页面，设置HTML页面中的某些元素样式，让HTML页面更加好看。 css好比是HTML的化妆品一样 HTML还是主体，css依赖HTML。scc的存在就是修饰HTML，所以新建的文件还是xx.html文件 2.css我们...
复制链接

扫一扫

专栏目录