《JavaEE》第四周day3学习笔记-CSS

一、CSS

(一)概念


CSS:Cascading Style Sheets(层叠样式表)
特点:功能强大,可将内容展示和样式控制进行分离,提高开发效率。

(二)CSS调用(四种)


方法1:内联方式
在标签内部使用style="属性:属性值"使用
方法2:嵌入方式
在head标签内,使用<style></style>标签使用
方法3:链接方式
<link rel="stylesheet" href="URL">使用
方法4:导入方式
在style标签内,使用@import"URL";语句

(三)CSS选择器


1.基础选择器

(1)ID选择器:#ID{}
(2)标签选择器:标签名{}
(3)类选择器:.类名{}
优先级:(1)》(2)》(3)

2.扩展选择器

(1)选择器:{}
(2)交集选择器:选择器1.选择器2{}
(3)并集选择器:选择器1,选择器2{}
(4)属性选择器:标签名[属性名=“属性值”]{}
(5)后代选择器:选择器1 选择器2{}

  • 标签:first-child获取第一个子代元素
  • 标签:last-child获取最后一个子代元素

(6)一代子元素选择器:选择器1>选择器2{}
(7)伪类选择器:标签:状态(link初始化/visited访问过/active访问中/hover悬浮中){}

(四)CSS常用属性


1.文本类属性

font-size:字体大小
font-family:字体样式类型
font-style:字体类型(normal 默认值;italic 斜体;oblique 倾斜)
font-weight:字体加粗
color:文本颜色
letter-spacing:字母间隔 (letter-spacing 属性增加或减少字符间的空白(字符间距))
text-decoration:划线修饰(underline 下划线)
text-indent:文本缩进
text-align:对其方式
line-height:行高 (line-height 属性设置行间的距离(行高))

2.背景类属性

background:(自由组合属性)
background-color:背景颜色
background-image:背景图片
background-repeat:平铺状态
background-position:属性设置背景图像的起始位置。(第一个值是水平位置,第二个值是垂直位置。如果仅规定了一个关键词,那么第二个值将是"center"。)

3.边框类属性

border:设置边框width宽度 | style样式(solid(实线),dashed(虚线), double(双实线)) | color颜色
border-radius:设置边框的圆角半径;

4.尺寸类属性

width:宽度
height:高度

(五)盒子模型(Box Model)


通常由<div></div>标签及<span></span>标签构成,主要用于网页布局
包含外边距(margin)、边框(border)和内边距(padding)。

1.相对定位
说明:保留原有空间位置,相对于原有空间进行位移
CSS:position: relative;top:位移量;left:位移量。
2.绝对定位
说明:不保留原有空间位置,相对于存在position属性的父级元素进行位移
CSS:position: absolute;top:位移量;left:位移量。
3.浮动
说明:不保留原有空间位置,类似于新建图层
CSS:float: 浮动方向
注意,可以通过空块设置clear:both样式,清除语句上方的浮动样式,支撑父级元素。


【遇到的“坑”】

1:<a><a/>标签默认存在color设定,如果需要变更颜色,必须通过本级标签,如果需要通过父级标签修改颜色,需要设置"color: inherit"属性。
2:first-child及last-child处理的子标签不能出现兄弟标签,否则干扰选择。
3:当出现多级列表时,应注意标签是否应用于最末端标签导致父标签CSS样式失效。

【思考】CSS的优先级?
通常情况下,子标签优先级高于父标签优先级。

发布了31 篇原创文章 · 获赞 0 · 访问量 812

猜你喜欢

转载自blog.csdn.net/u010761121/article/details/103500457