css笔记

最新推荐文章于 2024-07-25 16:45:46 发布

小阳不一样666666

最新推荐文章于 2024-07-25 16:45:46 发布

阅读量78

点赞数

分类专栏： java学习之路文章标签： css html javascript

本文链接：https://blog.csdn.net/sdfghdf/article/details/121044309

版权

java学习之路专栏收录该内容

4 篇文章 0 订阅

订阅专栏

css编程语言

简单介绍

1.是一种专门在浏览器编译并执行的编程语言.
2.用于定位浏览器中HTML标签并对定位的HTML标签中【样式属性】进行统一管理

HTML标签属性分类

1.基本属性

id属性，相当于身份证编号，用于区分html标签
name属性，相当于人名字，注意：允许一组标签拥有相同的name

<input type="text" id="one"  name="myText"/>
<input type="text" id="two"  name="myText"/>

2.样式属性

style属性
```
 <div style="background-color:red;color:green;width:300px;height:200px"></div>
```
3.工作状态属性

注意该属性，只存在于【表单域标签】，用于【表单域标签】状态

checked:存在于radio与checkbox中，表示标签是否被选中
disabled:表示标签处于不可用状态
readOnly:表示标签处于只读状态
seleteced：存在option标签，表示标签是否被选中

4.监听属性

监听属性用户与HTML标签之间进行通信通道，监听属性用于监听用户在何时对当前标签进行何种操作,当指定操作产生时，监听属性将会通知浏览器调用对应JavaScript方法处理当前请求

onmouseover表示鼠标放在上面发生变化

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			function myfun(){
				var myDIV=document.getElementById("one")
				myDIV.style.width="500px"
				myDIV.style.height="500px"
				myDIV.innerText='hello'
			}
		</script>
		<center>
			<div 
			id="one"
			style="width:300px;height:300px;background-color:aqua;font-size:50px;color:red"
			onmouseover="myfun()"
			>
			我是小阳
			</div>
		</center>
		
	</body>
</html>

效果图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ov1kj0R6-1635518823343)(C:\Users\小样\AppData\Roaming\Typora\typora-user-images\image-20211024104432421.png)]

鼠标碰到以后变化

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YXizFeJm-1635518823344)(C:\Users\小样\AppData\Roaming\Typora\typora-user-images\image-20211024104456190.png)]

HTML中添加css

1.方式一

直接在标签后面添加style属性

<div id="one" style="width:300px;height:300px;background-color:aqua;font-size:50px;color:red"></div>

2.方式二

CSS选择器语法格式:

<html> 
       <head>
		 <!--type='text/css'，-->
		 <style type="text/css">
		         定位条件{
			           "样式属性1":"值1";
				       "样式属性2"："值2"
			         }
		   </style>		 
		</head>	     
 </html>

定位条件分为：

id属性

格式：

#id{
	 "样式属性1":"值1";
	 "样式属性2"："值2"    
}

标签

标签名{
	 "样式属性1":"值1";
	 "样式属性2":"值2"    
}

在html中写格式为：

<标签 class=“类名”></标签名

写在<style type="text/css"></style>
.类名{
	 "样式属性1":"值1";
	 "样式属性2":"值2"    
}

层级选择器

1.html标签之间关系

父子关系，兄弟关系

2.父子关系

即为包含关系

<tr>
	 <td>
		<input type="text">
	 </td>
</tr>
td标签是tr标签的子标签
input标签是td标签的子标签

3.兄弟关系

一组标签拥有相同的父标签，并且彼此之间
没有任何包含关系，即为兄弟

<body>
	<div>1</div>  大哥
	<p>2</p>      二哥
	<span>3</span> 三弟
</body>

4.层级选择器介绍:
根据标签之间父子关系或则兄弟关系进行定位

5.简单的层级选择器

<style type="text/css">
定位父标签条件  定位子标签条件{
			      
			                                      }
 找到指定父标签下满足条件的所有子标签

 </style>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qlGcLHb5-1635518823345)(C:\Users\小样\AppData\Roaming\Typora\typora-user-images\image-20211024113956202.png)]

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FPTYyQkz-1635518823346)(C:\Users\小样\AppData\Roaming\Typora\typora-user-images\image-20211024114019569.png)]

找到指定父标签下满足条件的所有子标签

```

[外链图片转存中…(img-qlGcLHb5-1635518823345)]

效果：

[外链图片转存中…(img-FPTYyQkz-1635518823346)]

小阳不一样666666

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css笔记

css编程语言简单介绍1.是一种专门在浏览器编译并执行的编程语言.2.用于定位浏览器中HTML标签并对定位的HTML标签中【样式属性】进行统一管理HTML标签属性分类1.基本属性id属性，相当于身份证编号，用于区分html标签name属性，相当于人名字，注意：允许一组标签拥有相同的name<input type="text" id="one" name="myText"/><input type="text" id="two" name="myText"/>
复制链接

扫一扫