1.1 JAVA CSS 前端网页

最新推荐文章于 2023-07-07 21:28:43 发布

CHONSK

最新推荐文章于 2023-07-07 21:28:43 发布

阅读量265

点赞数

分类专栏： Java基础文章标签： css 前端 java

本文链接：https://blog.csdn.net/m0_53879048/article/details/123061952

版权

1. 什么是CSS

Cascading Style Sheet 层叠级联样式表

CSS : 表现（美化网页）

在字体，颜色，样式上美化，边距，背景图片等

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--规范，<style> 可以编写CSS代码
语法 ：
选择器 ：{
      声明
        }
-->

    <style>
        h1{
        color: red;
        }
    </style>

</head>

<body>

<h1>你好</h1>


</body>
</html>

2. CSS的优势

内容和表现分离
网页结构统一，可以实现复用。
样式十分的丰富
建议使用独立于HTML的CSS文件
利于SEO，容易被搜索引擎收录

3. 四种CSS的导入方式

1. 内部样式表：

统一写在HTML中，性能不高，搜索慢，也会很乱。

（1、1.1 ）

2. 外部样式表（链接式）：

通过CSS写在外部，需要一个link标签，href下是路径位置。

（1、1.2 ）

3. 行内样式：

优先级根本呢要看谁距离h1距离近则先表现哪一个。

（1、1.3 ）

4. 外部样式（导入式）

（1、1.4 ）

1.2 选择器

选择器：选择页面上的某一个或者某一类元素。

1. 基本选择器

1、标签选择器

2、类选择器

3、ID选择器

优先级问题：ID选择器 > 类选择器 > 标签选择器

标签选择器：缺点：当有多个h1的时候，不能把另一个h1改，他们都是统一的样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签选择器</title>

    <style>
        h1{
        color: red;
        }
    </style>

</head>
<body>

<h1>学JAVA</h1>
<p>听狂神说</p>

</body>
</html>

类选择器：类选择器可以把不同的h1赋予不同的属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>类选择器</title>

<!--类选择器的格式  ：.class+名称名字{}
好处是
-->
    <style>
        .nihao{
            color: #3745ff;
        }

        .zaijian{
            color: #000;
        }

    </style>

</head>
<body>

<h1 class="nihao">qinjiang</h1>
<h1 class="zaijian">nihao</h1>

<p class="nihao">
    原因就是因为
</p>

</body>
</html>

ID选择器 : ID选择器中的名称只能是英文字母，别的都无效。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ID选择器</title>
<!--id 选择器 : # + ID名称{}
 -->
    <style>
        #nihao{
        color: #3344ff;
        }
        #464{
        color: #3344f

最低0.47元/天解锁文章

CHONSK

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
1.1 JAVA CSS 前端网页

1. 什么是CSSCascading Style Sheet 层叠级联样式表CSS : 表现（美化网页）在字体，颜色，样式上美化，边距，背景图片等<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title><!--规范，<style> 可以编写CSS代码语法：选...
复制链接

扫一扫