Java web学习day02 html与css结合的三种方式

最新推荐文章于 2022-08-15 12:43:26 发布

折叠的饼干

最新推荐文章于 2022-08-15 12:43:26 发布

阅读量187

点赞数

分类专栏： Javaweb 文章标签： css java html

本文链接：https://blog.csdn.net/weixin_45627369/article/details/120472511

版权

Javaweb 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

CSS技术介绍

css是层叠样式表单，用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言

选择器：浏览器根据“选择器”决定受css样式影响的HTML元素
属性:要改变的样式名，并且每一个属性都有一个值。属性和值被冒号分开，并由花括号包围，这样就组成了一个完整的样式声明
多个声明:如果要定义不止一个声明，则需要用分号将每个声明分开。
一般每行只描述一个属性

p{
color:red;
font-size:30px;
}

CSS和HTML的结合方式

第一种

在标签的style属性上设置“key:value vlaue",修改标签样式
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
       <!--
       div标签默认独占一行
       span标签长度是封装数据的长度
       p段落标签，默认在段落的上方/下方各空出一行
       -->
      <div style="border:1px ;border-style:solid;border-color:red">div标签</div>
      <div style="border:1px ;border-style:solid;border-color:red">div标签</div>
      <span style="border:1px ;border-style:solid;border-color:red">span标签1</span>
      <span style="border:1px ;border-style:solid;border-color:red">span标签2</span>
      <p style="border:1px ;border-style:solid;border-color:red">p段落标签1</p>
      <p style="border:1px ;border-style:solid;border-color:red">p段落标签2</p>

</body>
</html>

缺点：
1.如果标签多了。样式多了，代码量非常庞大。
2.可读性非常差
3.CSS代码没有体现出复用性

第二种

在head标签中，使用style标签来定义各种自己需要的样式

xxx{
   key:value vlaue;
}

删除 ctrl+R全部替换成空白
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--style标签专门用来定义css样式代码-->
    <style type="text/css">
      div{
        border:1px solid red;
      }
    </style>
</head>
<body>
       <!--
       div标签默认独占一行
       span标签长度是封装数据的长度
       p段落标签，默认在段落的上方/下方各空出一行
       -->
      <div >div标签</div>
      <div >div标签</div>
      <span >span标签1</span>
      <span >span标签2</span>
      <p >p段落标签1</p>
      <p style="border:1px red solid;">p段落标签2</p>

</body>
</html>

注意html注释不能放到style标签里，style标签里都是css，应该用/* */
缺点：
1.只能在同一页面内复用代码，不能在多个页面中复用css代码
2.维护起来不方便，实际项目中有成千上百个页面，要到每个页面中去修改，工作量太大了

第三种

把css样式写成一个单独的css文件，再通过link标签引入即可复用
使用html的

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

标签，导入css样式文件
在这里插入图片描述

折叠的饼干

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Java web学习day02 html与css结合的三种方式

CSS技术介绍css是层叠样式表单，用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言选择器：浏览器根据“选择器”决定受css样式影响的HTML元素属性:要改变的样式名，并且每一个属性都有一个值。属性和值被冒号分开，并由花括号包围，这样就组成了一个完整的样式声明多个声明:如果要定义不止一个声明，则需要用分号将每个声明分开。一般每行只描述一个属性p{color:red;font-size:30px;}CSS和HTML的结合方式第一种在标签的style属性上设
复制链接

扫一扫