CSS部分内容

最新推荐文章于 2024-06-15 06:21:07 发布

BerglingYY

最新推荐文章于 2024-06-15 06:21:07 发布

阅读量145

点赞数

分类专栏： Web前端文章标签： css html 前端

本文链接：https://blog.csdn.net/weixin_62838185/article/details/125189544

版权

Web前端专栏收录该内容

9 篇文章 1 订阅

订阅专栏

总述

1、什么是CSS，有什么作用？
   CSS(Cascading Style Sheet):层叠样式表语言。
   CSS的作用是：
       修饰HTML页面，设置HTML页面中的某些元素的样式，让HTML页面更好看。
       CSS好比是HTML的化妆品一样。
   HTML还是主体，CSS依赖HTML。CSS的存在就是修饰HTML，所以新建的文件还是xx.html文件。

2、CSS对后端程序员的要求程度
* 常见的CSS样式要求会写。
* 别人写的CSS样式要能看懂。

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

   第一种方式：在标签内部使用style属性来设置元素的CSS样式，这种方式称为内联定义方式。
       语法格式：
           <标签 style="样式名:样式值;样式名:样式值;样式名:样式值;..."></标签>

   第二种方式：在head标签中使用style块，这种方式被称为样式块方式。
       语法格式：
           <head>
               <style type="text/css">
                   选择器 {
                       样式名 : 样式值;
                       样式名 : 样式值;
                       .....
                   }
                   选择器 {
                       样式名 : 样式值;
                       样式名 : 样式值;
                       .....
                   }
               </style>
           </head>

CSS注释格式

注释内容

   第三种方式：链入外部样式表文件，这种方式最常用。（将样式写到一个独立的xxx.css文件当中，在需要的网页上
   直接引入css文件，样式就引入了）
       语法格式：
           <link type="text/css" rel="stylesheet" href="css文件的路径" />

       这种方式易维护，维护成本较低。
           xxx.css文件
               1.html中引入了
               2.html中引入了
               3.html中引入了
               4.html中引入了

第一种方式：内联定义方式

<div style="width : 300px; height : 300px; background-color : #CCFFFF; display : block;
		border-color : red;border-width : 1px;border-style : solid;"></div>

            width 宽度样式
           height 高度样式
           background-color 背景色样式
           display 布局样式（none表示隐藏，block表示显示）

border 边框（border-style默认值为none）

其中：border : border-width || border-style || border-color

		<!--
			样式还能这样写：
				border : 1px solid black;
		-->
		<div style="width : 300px; height : 300px; background-color : #CCFFFF; display : block;
		border : 1px solid black;"></div>

第二种方式：样式块

id选择器

               语法格式：
                   #id{
                       样式名 : 样式值;
                       样式名 : 样式值;
                       样式名 : 样式值;
                       ....
                   }

    <head>
		<style type="text/css">
			#usernameErrorMsg {
				color : red;
				font-size : 12px;
			}
    </head>
	<body>
		
		<!--
			设置样式字体大小12px，颜色为红色！
		-->
		<span id="usernameErrorMsg">对不起，用户名不能为空！</span>

	</body>

标签选择器

语法格式：
                   标签名 {
                       样式名 : 样式值;
                       样式名 : 样式值;
                       样式名 : 样式值;
                       ....
                   }
               标签选择器作用的范围比id选择器广。

        <style type="text/css">
			div {
				background-color : black;
				border : 1px solid red;
				width : 100px;
				height : 100px;
			}
        </style>

类选择器

               语法格式：
                   .类名{
                       样式名 : 样式值;
                       样式名 : 样式值;
                       样式名 : 样式值;
                       ....
                   }

class相同的标签可以认为是同一类标签

        <style type="text/css">
			.student {
				border : 1px solid red;
				width : 400px;
				height : 30px;
			}
        </style>

		<input type="text" class="student"/>

		<br><br><br>

		<select class="student">
			<option>专科</option>
			<option>本科</option>
		</select>

第三种方式：引入外部独立的css文件

	<head>
		<meta charset="utf-8">
		<title>在HTML中使用CSS样式的第三种方式：引入外部独立的css文件</title>		

		<!--引入css-->

		<link rel="stylesheet" type="text/css" href="css/1.css" />

		
	</head>
	<body>
		<a href="http://www.baidu.com">百度</a>

        <span id="baiduSpan">点击我链接到百度哦！</span>
    </body>

css文件：后缀.css

a {
	text-decoration : none;
}

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

实现效果：不显示超链接的下划线，普通文本显示下划线

cursor : 鼠标样式，pointer是小手，hand也是，但是hand有浏览器兼容问题。建议使用pointer

列表样式

ul{

list-style-typr：样式 ;

}

		<style type="text/css">
			ul{
				/*list-style-type: none;*/
				/*list-style-type: circle ;*/
				list-style-type: square ;
			}
		</style>
		
	</head>
	<body>
		<ul>
			<li>中国
				<ul>
					<li>河南</li>
					<li>山东</li>
					<li>重庆</li>
				</ul>
			</li>
			<li>美国</li>
			<li>俄国</li>
		</ul>

常用列表符号

disc	:	CSS1	默认值。实心圆
circle	:	CSS1	空心圆
square	:	CSS1	实心方块
decimal	:	CSS1	阿拉伯数字
lower-roman	:	CSS1	小写罗马数字
upper-roman	:	CSS1	大写罗马数字
lower-alpha	:	CSS1	小写英文字母
upper-alpha	:	CSS1	大写英文字母
none	:	CSS1	不使用项目符号

绝对定位

		<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>