前端课堂第三课

前端课堂第三课,第1张

概述<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> css 层叠样式表 修饰网页的 css的语法 1.行内样式的语法 2.内部样式表和外部样式表的语法 css的使用方式 1.行内样式 2.内部样式表 3.外部样式表 4.外部导入样式 css选择器 ID选择器 class选择器 标签选

<!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.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”

下拉:

<select>

                   <option >

                  

                   </option >

         </select>

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

position:absolutely   绝对定位

@R_502_4612@:relative     相对定位

总结

以上是内存溢出为你收集整理的前端课堂第三课全部内容,希望文章能够帮你解决前端课堂第三课所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1075657.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-26
下一篇 2022-05-26

发表评论

登录后才能评论

评论列表(0条)

保存