java web 之css学习

最新推荐文章于 2022-08-25 12:53:39 发布

Eric010101

最新推荐文章于 2022-08-25 12:53:39 发布

阅读量154

点赞数 1

分类专栏： JavaWeb 前端

本文链接：https://blog.csdn.net/oneil2016/article/details/81100028

版权

JavaWeb 同时被 2 个专栏收录

85 篇文章 2 订阅

订阅专栏

前端

8 篇文章 0 订阅

订阅专栏

CSS意思就是层叠样式表，用来美化html。

CSS语法

CSS的语法由三部分组成：一个选择器，一个属性和一个值。selector {property: value}

为了让样式定义更有可读性，你可以像这样分行描述属性：

p { text-align: center; color: black; font-family: arial }

可以将选择器组合，用逗号分隔每个选择器。

h1,h2,h3,h4,h5,h6 { color: green }

类选择器：

p.right {text-align: right}
p.center {text-align: center}

HTML中如下：

<p class="right"> This paragraph will be right-aligned. </p>
<p class="center"> This paragraph will be center-aligned. </p>

每个HTML元素只能有一个类属性。

让所有HTML中所有带class=”center”的元素文字居中：

.center {text-align: center}

ID选择器：

#green {color: green}

上面的规则将匹配h1和p元素：

<h1 id="green">Some text</h1>
<p id="green">Some text</p>

id最好还是唯一的，就如同人的身份证号一样，每一个人都有一个唯一的身份证号，对应的每一个html元素都有一个唯一的id。

CSS注释：/* This is a comment */

怎样使用CSS

外部样式表（ External Style Sheet）
内嵌样式表（ Internal Style Sheet）
行内样式（ Inline Styles）

外部样式表：<link rel="stylesheet" type="text/css" href="test.css">

内嵌样式表：

<head>
    <style type="text/css">
        hr {color: red}
        .center {text-align: center;color: red}
        p {margin-left: 20px}
        body {background-image: url("images/back40.gif")}
    </style>
</head>

浏览器将立即读取样式定义，并依据它来格式化文档。

行内样式：一般这类方法在个别元素需要改变样式的时候使用。

<p style="color: red; margin-left: 20px"> This is a paragraph </p>

多重样式表：如果一些属性被相同的选择器设置成不同的样式，值就会向更为具体的样式所继承（具体化）。

举个例子，一个外部样式表有这样的h3选择器属性：

h3 { color: red; text-align: left; font-size: 8pt }

同时有一个内嵌样式表有这样的h3选择器属性：

h3 { text-align: right; font-size: 20pt }

如果页面在有内嵌样式表的同时又连接到外部样式表的话h3的属性将变为：

color: red; text-align: right; font-size: 20pt

结果：颜色是继承了外部样式表而文字对齐和文字大小被内嵌的样式表所替换。

超链接

a:link {color: green}——表示一开始链接所呈现的文字是绿色的。
a:hover {color: black}——表示光标悬停在链接上，链接变为黑色。
a:active {color: blue}——表示点击链接，鼠标还没松开，链接变为蓝色。
a:visited {color: yellow}——表示链接已经被点击后，链接变为黄色。