提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

1.CSS介绍

1.1 CSS相关概述

CSS概念：

CSS 指的是层叠样式表(Cascading Style Sheets)
CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素
CSS 节省了大量工作。它可以同时控制多张网页的布局
外部样式表存储在 CSS 文件中

在Web的标准里面，我们把它分为“结构”，“表现”，“行为”。这三者相互分离，又相互约束。

结构：网页上面显示什么内容，有什么东西，这就是网页的结构。而网上面的到底有什么东西则是由 HTML决定的
表现：这个内容在页面上面怎么显示，显示成什么样子，这是由CSS决定的。所以表现形式是控制结构的样式的，综合所说就是CSS来控制HTML的样式
行为：指的是用户与网页之间的一系列操作在上面的三个部分里面，它们三者各司其职，各有所长。如果我们想通过 HTML标签去控制HTML的样式，这样非常麻烦（因为这并不是它的专长，HTML主要负责的是网页的结构，不是网页的样式）

在之前的HTML的练习里面，我们发现几个很重要的问题：

HTML标签如果去做样式，非常麻烦，要很多代码。
HTML标签如果去做样式，非常不统一，有些标签有的属性，其它标签又没有。
HTML标签如果去做样式，仍然有很多样式无实实现针对像上面这样的问题， W3C 就推出了解决方案去解决这个问题，这个解决方案就是推出了一个新的技术，这个技术叫 CSS。

1.2 CSS基础特性

统一性 : 针对之前在HTML里面不同的标签有不同的属性这些情况，Web程序员在记标签的时候，还需记忆这些不同的样式属性就很麻烦，并且属性名还不统一，所以CSS在这里就推出一个统一的标准，它使用统一的样式属性来设置HTML的样式。
便捷性 : 所谓的便捷性就是CSS操作起来非常方便。CSS提供了大量的选择器，这些选择器可以批量的或单个的选中页面上面的元素，然后进行相应的样式操作。
分离性 : 在网页里面，我们的结构代码是HTML，样式代码是CSS，它们两个应该可以进行相互分离。而在之前的HTML里面它是通过标签来完成的，它们的代码是不可侵害的当我们把CSS样式单独分离出来以后，其实可以实现一个CSS样式控制多个页面，这样极大的简化了我们的工作量。

1.3 CSS样式关联的方式

内嵌式关联样式 : HTML标签中通过style属性来设置CSS样式

<!--语法格式-->
<标签 style = "属性名1:属性值1; ... 属性名n:属性值n;"></标签>

内联式关联样式 :在HTML的head标签中，添加一组style标签，在标签中写样式。

<style type="text/css">
    选择器{
    	属性名:属性值;
    	属性名:属性值;
    }
</style>

外联式关联样式 : 创建一个新的css文件，在css文件中写样式，通过link标签来导入外部css文件。

<link href="css文件路径" rel="stylesheet" type="text/css">
<!--
	href 指的是链接CSS的地址
	rel 指的是引用类型为样式表
	type 指的是文件类型是CSS文件
-->

1.4 CSS样式基本语法

CSS 规则集（rule-set）由选择器和声明块组成：

选择器{
    属性名:属性值;
    属性名:属性值;
}

选择器指向您需要设置样式的 HTML 元素。
声明块包含一条或多条用分号分隔的声明。
每条声明都包含一个 CSS 属性名称和一个值，以冒号分隔。
多条 CSS 声明用分号分隔，声明块用花括号括起来。

2.CSS选择器

2.1 简单选择器

id选择器 : ID是每个HTML元素都具备的一个属性，原则上面是不允许重复的，所以我们可以通过这个特点让CSS 只选中每个ID的元素，达到单个（或某个范围选取）

<style>
    #id名称{
        属性名:属性值;
    	属性名:属性值;
    }
</style>
<标签 id = "id名称"></标签>

类选择器 : 这个选择器是我们CSS中使用最多的选择器，它灵活，方便

<style>
    .class名称{
        属性名:属性值;
    	属性名:属性值;
    }
</style>
<标签 class = "class名称"></标签>

标签选择器 : 标签选择器以HTML页面上面的某一个标签选依据进行选择

<style>
    标签名称{
        属性名:属性值;
    	属性名:属性值;
    }
</style>
<标签></标签>

代码演示

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>简单选择器</title>
        <style>
            P{
                color: red;
            }
            .span{
                color: aqua;
            }
            #b{
                color: antiquewhite;
            }
        </style>
    </head>
    <body>
        <p>标签选择器</p>
        <p>标签选择器</p>
        <span class="span">类选择器</span>
        <b id="b"> id选择器</b>
    </body>
</html>

2.2 伪类选择器

伪类用于定义元素的特殊状态。

例子	例子描述
:active	a:active	选择活动的链接。
:checked	input:checked	选择每个被选中的元素。
:disabled	input:disabled	选择每个被禁用的元素。
:empty	p:empty	选择没有子元素的每个元素。
:enabled	input:enabled	选择每个已启用的元素。
:first-child	p:first-child	选择作为其父的首个子元素的每个元素。
:first-of-type	p:first-of-type	选择作为其父的首个元素的每个元素。
:focu	input:focus	选择获得焦点的元素。
:hover	a:hover	选择鼠标悬停其上的链接。
:in-range	input:in-range	选择具有指定范围内的值的元素。
:invalid	input:invalid	选择所有具有无效值的元素。
:lang(language)	p:lang(it)	选择每个 lang 属性值以 “it” 开头的元素。
:last-child](https:	p:last-child	选择作为其父的最后一个子元素的每个元素。
:last-of-type	p:last-of-type	选择作为其父的最后一个元素的每个元素。
:link	a:link	选择所有未被访问的链接。
:not(selector)	:not§	选择每个非元素的元素。
:nth-child(n)	p:nth-child(2)	选择作为其父的第二个子元素的每个元素。
:nth-last-child(n)	p:nth-last-child(2)	选择作为父的第二个子元素的每个元素，从最后一个子元素计数。
:nth-last-of-type(n)	p:nth-last-of-type(2)	选择作为父的第二个元素的每个元素，从最后一个子元素计数
:nth-of-type(n)	p:nth-of-type(2)	选择作为其父的第二个元素的每个元素。
:only-of-type	p:only-of-type	选择作为其父的唯一元素的每个元素。
:only-child	p:only-child	选择作为其父的唯一子元素的元素。
:optional	input:optional	选择不带 “required” 属性的元素。
:out-of-range	input:out-of-range	选择值在指定范围之外的元素。
:read-only	input:read-only	选择指定了 “readonly” 属性的元素。
:read-write	input:read-write	选择不带 “readonly” 属性的元素。
:required	input:required	选择指定了 “required” 属性的元素。
:root	root	选择元素的根元素。
:target	#news:target	选择当前活动的 #news 元素（单击包含该锚名称的 URL）。
:valid	input:valid	选择所有具有有效值的元素。
:visited	a:visited	选择所有已访问的链接。

代码演示

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>伪类选择器</title>
        <style>
            a:hover{
                font-size: 100px;
                font-weight: 500;
            }
        </style>
    </head>
    <body>
        <a href="http://www.baidu.com">百度一下</a>
    </body>
</html>

2.3 伪元素选择器

CSS 伪元素用于设置元素指定部分的样式。

选择器	例子	例子描述
::after	p::after	在每个元素之后插入内容。
::before	p::before	在每个元素之前插入内容。
::first-letter	p::first-letter	选择每个元素的首字母。
::first-line	p::first-line	选择每个元素的首行。
::selection	p::selection	选择用户选择的元素部分。

代码演示

<html>
    <head>
        <style>
            p:after
            {
                content:"- 台词";
            }
        </style>
    </head>
    <body>
        <p>我是唐老鸭。</p>
        <p>我住在 Duckburg。</p>
    </body>
</html>

2.4 属性选择器

我们可以设置带有特定属性或属性值的 HTML 元素的样式。

选择器	例子	例子描述
[attribute]	[target]	选择带有 target 属性的所有元素。
[attribute=value]	[target=_blank]	选择带有 target=“_blank” 属性的所有元素。
[attribute~=value]	[title~=flower]	选择带有包含 “flower” 一词的 title 属性的所有元素。
[attribute\|=value]
[attribute^=value]	a[href^=“https”]	选择其 href 属性值以 “https” 开头的每个元素。
[attribute$=value]	a[href$=“.pdf”]	选择其 href 属性值以 “.pdf” 结尾的每个元素。
[attribute=value*]	a[href*=“w3school”]	选择其 href 属性值包含子串 “w3school” 的每个元素。

代码演示

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>伪元素选择器</title>
        <style>
            a[name]{
                color: red;
            }
            a[name=bbb]{
                color: aqua;
            }
        </style>
    </head>
    <body>
        <a href="http://www.baidu.com" name="aaa">aaa</a>
        <a href="http://www.baidu.com" name="bbb">bbb</a>
        <a href="http://www.baidu.com" name="ccc">ccc</a>
    </body>
</html>

2.5 派生选择器

语法格式

<!--格式一-->
父类选择器 子类选择器{
	属性名称:属性值;
	...
}

<!--格式二-->
父类选择器 > 子类选择器{
	属性名称:属性值;
	...
}

两种格式的区别：

第一种格式式查找的父类下所有子类选择器，包括子类的子类。
第二种格式只查找当前父类中子类的选择器，不再向子类中的子类查找。
也就是说格式一式连级查找，一直查找到无子标签为止。格式二，只是查到当前子标签，不再继续向下查找。

代码演示

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>派生选择器</title>
        <style>
            .demo01 p {
                color: red;
            }

            .demo02 > p {
                color: aqua;
            }
        </style>
    </head>
    <body>
        <div class="demo01">
            <p>aaaa</p>
            <div>
                <p>aaaa</p>
                <p>aaaa</p>
            </div>
            <p>aaaa</p>
        </div>
        <hr/>
        <div class="demo02">
            <p>aaaa</p>
            <div>
                <p>aaaa</p>
                <p>aaaa</p>
            </div>
            <p>aaaa</p>
        </div>
    </body>
</html>

3.常用的CSS样式

3.1 字体相关属性

属性	描述
font	简写属性。在一条声明中设置所有字体属性。
font-family	规定文本的字体系列（字体族）。
font-size	规定文本的字体大小。
font-style	规定文本的字体样式。
font-variant	规定是否以小型大写字母的字体显示文本。
font-weight	规定字体的粗细。

3.2 文本相关属性

属性	描述
color	设置文本颜色。
direction	指定文本的方向 / 书写方向。
letter-spacin	设置字符间距。
line-height	设置行高。
text-align	指定文本的水平对齐方式。
text-decoration	指定添加到文本的装饰效果。
text-indent	指定文本块中首行的缩进。
text-shadow	指定添加到文本的阴影效果。
text-transform	控制文本的大小写。
text-overflow	指定应如何向用户示意未显示的溢出内容。
unicode-bidi	与 direction 属性一起使用，设置或返回是否应重写文本来支持同一文档中的多种语言。
vertical-align	指定文本的垂直对齐方式。
white-space	指定如何处理元素内的空白。
word-spacing	设置单词间距。

3.3 背景相关属性

属性	描述
background	在一条声明中设置所有背景属性的简写属性。
background-attachment	设置背景图像是固定的还是与页面的其余部分一起滚动。
background-clip	规定背景的绘制区域。
background-color	设置元素的背景色。
background-image	设置元素的背景图像。
background-origin	规定在何处放置背景图像。
background-position	设置背景图像的开始位置。
background-repeat	设置背景图像是否及如何重复。
background-size	规定背景图像的尺寸。

3.4 边框相关的属性

属性	描述
border	简写属性，在一条声明中设置所有边框属性。
border-color	简写属性，设置四条边框的颜色。
border-radius]	简写属性，可设置圆角的所有四个 border-*-radius 属性。
border-style	简写属性，设置四条边框的样式。
border-width]	简写属性，设置四条边框的宽度。
border-bottom	简写属性，在一条声明中设置所有下边框属性。
border-bottom-color	设置下边框的颜色。
border-bottom-style	设置下边框的样式。
border-bottom-width	设置下边框的宽度。
border-left	简写属性，在一条声明中设置所有左边框属性。
border-left-color	设置左边框的颜色。
border-left-style	设置左边框的样式。
border-left-width	设置左边框的宽度。
border-right	简写属性，在一条声明中设置所有右边框属性。
border-right-color	设置右边框的颜色。
border-right-style	设置右边框的样式。
border-right-width	设置右边框的宽度。
border-top	简写属性，在一条声明中设置所有上边框属性。
border-top-color]	设置上边框的颜色。
border-top-style	设置上边框的样式。
border-top-width	设置上边框的宽度。

3.5 列表相关属性

属性	描述
list-style	简写属性。在一条声明中设置列表的所有属性。
list-style-image	指定图像作为列表项标记。
list-style-position	规定列表项标记（项目符号）的位置。
list-style-type	规定列表项标记的类型。

3.6 表格相关属性

属性	描述
border	简写属性。在一条声明中设置所有边框属性。
border-collapse	规定是否应折叠表格边框。
border-spacing	规定相邻单元格之间的边框的距离。
caption-side	规定表格标题的位置。
empty-cells	规定是否在表格中的空白单元格上显示边框和背景。
table-layout	设置用于表格的布局算法。

3.7 display属性

指的是元素是否可见

值

描述

none

此元素不会被显示。

block

此元素将显示为块级元素，此元素前后会带有换行符。

inline

默认。此元素会被显示为内联元素，元素前后没有换行符。

inline-block

行内块元素。（CSS2.1 新增的值）

list-item

此元素会作为列表显示。

table

此元素会作为块级表格来显示（类似），表格前后带有换行符。

inline-table

此元素会作为内联表格来显示（类似），表格前后没有换行符。

4.CSS布局

4.1 position 属性-相对定位

position 属性规定应用于元素的定位方法的类型。

性	描述
bottom	设置定位框的底部外边距边缘。
clip	剪裁绝对定位的元素。
left	设置定位框的左侧外边距边缘。
position	规定元素的定位类型。
right	设置定位框的右侧外边距边缘。
top	设置定位框的顶部外边距边缘。
z-index	设置元素的堆叠顺序。

4.2 float属性-浮动定位与clear 属性-清除浮动

CSS float 属性规定元素如何浮动。

left - 元素浮动到其容器的左侧
right - 元素浮动在其容器的右侧
none - 元素不会浮动（将显示在文本中刚出现的位置）。默认值。
inherit - 元素继承其父级的 float 值

clear 属性指定哪些元素可以浮动于被清除元素的旁边以及哪一侧。

none - 允许两侧都有浮动元素。默认值
left - 左侧不允许浮动元素
right- 右侧不允许浮动元素
both - 左侧或右侧均不允许浮动元素
inherit - 元素继承其父级的 clear 值

JavaWeb-02 CSS

文章目录

1.CSS介绍

1.1 CSS相关概述

1.2 CSS基础特性

1.3 CSS样式关联的方式

1.4 CSS样式基本语法

2.CSS选择器

2.1 简单选择器

2.2 伪类选择器

2.3 伪元素选择器

2.4 属性选择器

2.5 派生选择器

3.常用的CSS样式

3.1 字体相关属性

3.2 文本相关属性

3.3 背景相关属性

3.4 边框相关的属性

3.5 列表相关属性

3.6 表格相关属性

3.7 display属性

4.CSS布局

4.1 position 属性-相对定位

4.2 float属性-浮动定位与clear 属性-清除浮动

网站公告

今日签到

热门文章

最新发布