黑猴子的家：JavaWeb 之 CSS

黑猴子的家

于 2019-12-12 11:15:04 发布

阅读量142

点赞数

本文链接：https://blog.csdn.net/qq_28652401/article/details/103523189

版权

1、CSS概述

在CSS技术§生之前，页面上定义结构和显示效果的ã码耦合在一起，开发和维护都非常繁琐。

为了将显示效果设置从HTML代码中抽离出来，并提供更强大的表现力，W3C组织制定了CSS标准 - - Cascading Style Sheet 层叠样式表。

2、CSS编写位置

（1）内部
标签的style属性中

<p style="color: red ; font-size: 12px">落霞与孤鹜齐飞，秋水共长天一色</p>

写到style标签中

<style type="text/css">
     p {
        color: blue;
        background-color: yellow;
      }
</style>

（2）外部
写在外部的css文件中，然后通过link标签引入外部的css文件

<link rel="stylesheet" type="text/css" href="style.css" />

尖叫提示：注意优先级

3、基本语法

选择器 {声明1;声明2}

选择器 {
样式名1:样式值1;
样式名2:样式值2;
}

4、选择器

（1）元素选择器

标签名
例子：
p{}
a{}
h1{}

（2）id选择器

#id

（3）类选择器

.class

（4）选择器分组

可以同时使用多个选择器
选择器1,选择器2,选择器N{}

注意优先级

5、声明

声明格式：样式名1:样式值1;

6、常用样式

字体颜色 color
宽度 width
高度 height
背景颜色 background-color

7、颜色

在CSS中我们使用RGB值来表示颜色。
RGB值可以写成一个三组两位十六进制数字，这个数字要求以#号开头

#红色绿色蓝色
000000 - ffffff

8、CSS 定义样式位置的案例

（1）css1.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
    <p style="color: red ; font-size: 12px">落霞与孤鹜齐飞，秋水共长天一色</p>
</body>
</html>

（2）css2.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
  p {
     color: blue;
     background-color: yellow;
  }
</style>
</head>
<body>
    <p>落霞与孤鹜齐飞，秋水共长天一色</p>
</body>
</html>

（3）css3.html
html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
    <p>落霞与孤鹜齐飞，秋水共长天一色</p>
</body>
</html>

style.css

p {
    color: blue;
    background-color: yellow;
}

9、CSS 选择器案例

（1）css1.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
  p {
     color: blue;
     background-color: yellow;
  }
</style>
</head>
<body>
    <p>落霞与孤鹜齐飞，秋水共长天一色</p>
    <p>落霞与孤鹜齐飞，秋水共长天一色</p>
    <p>落霞与孤鹜齐飞，秋水共长天一色</p>
    <p>落霞与孤鹜齐飞，秋水共长天一色</p>
</body>
</html>

（2）css2.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
  #p1 {
     color: blue;
     background-color: yellow;
  }
</style>
</head>
<body>
    <p id="p1">落霞与孤鹜齐飞，秋水共长天一色</p>
    <p>落霞与孤鹜齐飞，秋水共长天一色</p>
    <p>落霞与孤鹜齐飞，秋水共长天一色</p>
    <p>落霞与孤鹜齐飞，秋水共长天一色</p>
</body>
</html>

（3）css3.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
  .selectp {
     color: blue;
     background-color: yellow;
  }
</style>
</head>
<body>
    <p class="selectp">落霞与孤鹜齐飞，秋水共长天一色</p>
    <p>落霞与孤鹜齐飞，秋水共长天一色</p>
    <p class="selectp">落霞与孤鹜齐飞，秋水共长天一色</p>
    <p>落霞与孤鹜齐飞，秋水共长天一色</p>
</body>
</html>

（4）css4.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
  #p1,.selectp {
     color: blue;
     background-color: yellow;
  }
</style>
</head>
<body>
    <p id="p1">落霞与孤鹜齐飞，秋水共长天一色</p>
    <p>落霞与孤鹜齐飞，秋水共长天一色</p>
    <p class="selectp">落霞与孤鹜齐飞，秋水共长天一色</p>
    <p class="selectp">落霞与孤鹜齐飞，秋水共长天一色</p>
</body>
</html>

10、CSS颜色案例

（1）css1.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
  #p1,.selectp {
     color: #000000;
     background-color: #ff0000;
  }
</style>
</head>
<body>
    <p id="p1">落霞与孤鹜齐飞，秋水共长天一色</p>
    <p>落霞与孤鹜齐飞，秋水共长天一色</p>
    <p class="selectp">落霞与孤鹜齐飞，秋水共长天一色</p>
    <p class="selectp">落霞与孤鹜齐飞，秋水共长天一色</p>
</body>
</html>

尖叫提示：还有许多没有讲到，大家可以看W3School，讲到的这些都是最常用的

黑猴子的家

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
黑猴子的家：JavaWeb 之 CSS

1、CSS概述在CSS技术§生之前，页面上定义结构和显示效果的ã码耦合在一起，开发和维护都非常繁琐。为了将显示效果设置从HTML代码中抽离出来，并提供更强大的表现力，W3C组织制定了CSS标准 - - Cascading Style Sheet 层叠样式表。2、CSS编写位置（1）内部标签的style属性中<p style="color: red ; font...
复制链接

扫一扫