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