Java学习笔记-Java基础23(CSS)

时间:2023-02-24 11:28:12

1.CSS:层叠样式表,规定如何显示HTML,美化HTML。CSS由多个样式规则组成,每个样式规则有两部分组成:选择器和样式声明。CSS的使用方式有三种,分别是:

    1)内联样式:样式定义在单个的HTML元素中,直接写在标签的style属性里,属性与属性值之间用:连接,属性之间用;分隔

    2)内部样式:样式定义在HTML的头元素(<head>)中,包含在<style>标签中

    3)外部样式:样式定义在外部.css文件中,再由HTML的头元素中的<link/>(单标签)引用

Java学习笔记-Java基础23(CSS)

2.CSS规则性:

    1)继承性:子元素继承父元素的规则声明

    2)层叠性:若元素有不同的规则声明,则可以叠加

    3)优先级:对于冲突的规则声明(如都声明了字体大小),则内联样式的优先级最高,遵循就近原则

3.CSS选择器

    1)元素选择器:根据元素名选择CSS的作用目标

    2)类选择器:根据元素的class属性值选择,语法:.className{}

    3)id选择器:根据元素的id属性值选择,语法:#id{}

    4)选择器组:多个选择器用逗号隔开

    5)派生选择器:选择某个元素的子元素

    6)伪类选择器:用于设置不同状态的元素规则,一般和其他选择器一起使用

        ---:link:向未被访问的超链接添加样式

        ---:visited:向已被访问过的超链接添加样式

        ---:active:向被激活的元素添加样式

        ---:hover:鼠标悬停至元素上方时,添加样式

        ---:focus:元素获得焦点时,添加样式

Java学习笔记-Java基础23(CSS)

4.border:边框,它的overflow(当内容溢出元素边框时如何处理)值有:

    ---visible:溢出部分可见,缺省值

    ---hidden:溢出部分隐藏

    ---scroll:溢出部分组成滚动条

    ---auto:边框自动适应高度,包含全部内容

5.box模型:定义了元素框处理元素内容、边框、内外边距的方式

Java学习笔记-Java基础23(CSS)

Java学习笔记-Java基础23(CSS)

6.box模型边框设置:

    1)四边设置:内外边距只设置一个值,表示四个方向的值一样

    2)单边设置:分别给每个边设置

    3)对边设置:只设置两个值,分别表示上下、左右的值

    Java学习笔记-Java基础23(CSS)

7.定位:定义了元素框相对于元素本身的位置或父元素的位置,甚至浏览器等出现的位置

    1)流定位:块级元素从上到下垂直排列,行内元素从左到右水平排列

    2)浮动定位:让元素脱离流定位,然后将元素放置在父元素的左边或右边,浮动定位不脱离父元素,经常用来实现特定的显示效果。设置浮动定位的属性是float,清除浮动定位的属性是clear

    3)相对定位:元素所占空间不释放,只是相对本身位置进行移动。首先设置position的值为relative,然后由left或right设置水平偏移,top或button设置垂直偏移

    4)绝对定位:元素所占空间释放,相对最近已定位的祖元素的位置进行移动。首先设置position的值为absolute,然后由left或right设置水平偏移,top或button设置垂直偏移

    5)固定定位:元素不占页面空间,相对于浏览器进行设置首先设置position的值为fixed,然后由left或right设置水平偏移,top或button设置垂直偏移

Java学习笔记-Java基础23(CSS)

8.显示方式:元素都有默认的显示方式,块级元素是从上到下,可以设置宽高;行内元素是从左到右,不能设置宽高;行内块,从左到右显示,能设置宽高

    ---用display属性改变显示方式,值有none(不显示该元素,并释放位置)、block(将元素设置为块显示)、inline(将元素设置为行内显示)、inline-block(将显示方式设置为行内块)