javaWeb-css部分

最新推荐文章于 2024-06-28 15:21:24 发布

qishimu

最新推荐文章于 2024-06-28 15:21:24 发布

阅读量952

点赞数 22

分类专栏： javaweb 文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_45649595/article/details/135684685

版权

javaweb 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

文章目录

CSS简介
CSS导入方式
CSS选择器
CSS属性

CSS简介

是一种用来控制网络表现的语言
CSS（Cascading Style Sheet）：层叠样式表

用来控制HTML标签的表示样式

学习

如何和HTML标签联合使用
学习写CSS代码：1 选择器 2 属性

CSS导入方式

内联样式：在标签内部使用style属性，属性值是CSS属性值键值对

<div style="color:red">Hello CSS</div>

耦合度高

内部样式:定义

<style type="text/css">
	div{
		color:red;
		}
</style>

外部样式：定义link标签，引入外部的css文件

<link rel="stylesheet href="demo.css">

demo.css:
div{
	color:red;
}

rel 指定导入格式 href指定位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
  span{
    color: red;
  }
</style>
<link href="demo.css" rel="stylesheet">
<body>
  <div style="color: red">Hello CSS</div>

  <span>
    Hello again
  </span>

  <p>Hello final</p>
</body>
</html>

在这里插入图片描述

CSS选择器

选择器是选取需设置样式的元素（HTML标签）

demo.css:
div{
	color:red;
}

元素选择器

元素名称 {color: red}

div{color:red}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
  div{
    color:red;
  }
</style>
<body>
<div>div1</div>
<div>div2</div>
<div>div3</div>
<span>
  span
</span>
</body>
</html>

在这里插入图片描述

选择所有div的标签

id选择器

#id属性值{color:red}

#name{color:red}
<div id="name">hello css2</div>

选择所有对应id值的（id不能重复所以唯一）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
  div{
    color:red;
  }
  
  #name{color:blue}
</style>
<body>
<div>div1</div>
<div id="name">div2</div>
<div>div3</div>
<span>
  span
</span>
</body>
</html>

在这里插入图片描述
** 谁选择的范围越小，谁生效**

类选择器

.cls{color:red}
<div class="cls">hello css3</div>

.class属性值{color:red}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
  div{
    color:red;
  }

  #name{color:blue;}
  
  .cls{color: green;}
</style>

<body>
<div>div1</div>
<div id="name" class="cls">div2</div>
<div class="cls">div3</div>
<span class="cls">
  span
</span>
</body>
</html>