前端课堂第三课

最新推荐文章于 2025-09-12 14:39:04 发布

weixin_30929011

最新推荐文章于 2025-09-12 14:39:04 发布

阅读量65

点赞数

CC 4.0 BY-SA版权

文章标签：前端 ViewUI

原文链接：http://www.cnblogs.com/huayong/p/10947020.html

本文围绕CSS展开，介绍了其语法、使用方式、选择器、样式优先级等基础知识，还提及颜色表示方法、文本类样式、元素显示与隐藏等内容，对比了display:none和visibility:hidden的区别，最后介绍了表单元素和定位方式。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
css
层叠样式表修饰网页的

css的语法
1.行内样式的语法
2.内部样式表和外部样式表的语法

css的使用方式
1.行内样式
2.内部样式表
3.外部样式表
4.外部导入样式

css选择器
ID选择器
class选择器
标签选择器
组合选择器
子代选择器
后代选择器
通用选择器
伪类选择器 :hover鼠标悬浮上去的样式

css样式的优先级
1.根据权重来确定
2.如果权重相同，就近原则（后定义原则）

权重：仅仅只是一个参考的值，并没有实际的含义
内联 1000
id 100
class 10
伪类 10
标签 1
通用 0
!important 只要出现就以这个为主
注意：计算权重的时候不需要去管子代、后代。直接加起来就OK

颜色的三种表示方法
1.颜色英文单词
2.16进制
3.rgb 扩展 rgba

文本类样式
color
line-height 得确定里面有几行
text-align 对齐方式
text-decoration 下划线
font-size 字体大小
font-style 字体风格（倾斜...）
font-family 字体样式（宋体...）
font-weight 字体加粗

元素的显示方式
display
inline 行内元素
inline-block
block
none 隐藏

元素的隐藏
visibility:hidden

轮廓
主要用在input标签中，只需要清空即可
列表
list-style：none 即可
鼠标的样式
cursor
透明度
opacity: 0.1; 取值：0-1之间可以为0和1 0表示全透，1表示全不透
rgba(255,0,0,0.1)

</body>
</html>

提问1 ：display:none 和 visibilityhidden两者的区别？

答：如果给一个元素设置了display: none，那么该元素以及它的所有后代元素都会隐藏，它是前端开发人员使用频率最高的一种隐藏方式。隐藏后的元素无法点击，无法使用屏幕阅读器等辅助设备访问，占据的空间消失。

用法：<p style=”display:none”>B元素</p>

给元素设置visibility: hidden也可以隐藏这个元素，但是隐藏元素仍需占用与未隐藏时一样的空间，也就是说虽然元素不可见了，但是仍然会影响页面布局。

用法：<p style=”visibility：hidden”>B元素</p>

表单：

文本框：type=”text”

单选：type=”radio”

多选：type=”checkbox”

下拉：

</option >

</select>

多行多列段落文本框 <Textarea name=”” rows=”” cols=””>

Position:absolutely 绝对定位

Position:relative 相对定位

转载于:https://www.cnblogs.com/huayong/p/10947020.html