CSS基础（一）

最新推荐文章于 2024-01-15 03:22:09 发布

ll_j_21

最新推荐文章于 2024-01-15 03:22:09 发布

阅读量106

点赞数

分类专栏：前端开发、java web、数据库

本文链接：https://blog.csdn.net/ll_j_21/article/details/102643053

版权

前端开发、java web、数据库专栏收录该内容

71 篇文章 0 订阅

订阅专栏

1、什么是css
css（cascading style sheet）级联样式表，层叠样式表
css主要的目的是用来装扮网页的
2、主流的版本
css2、css3
3、如何使用css
存在三种使用css的方式
|-- 标签样式
|-- 内联样式
|-- 外联样式

w3c在2007年，提出了三层分离原则
结构层：HTML
表示层：css
行为层：JavaScript

4、css的选择器
|-- 基本选择器：

|-- id选择器 #id
|-- class选择器 .className
|-- 标签选择器 tagName
|-- 通配符选择器
|-- 逗号选择器

标签的优先级比css优先级高

id选择器

#id
id不要重复

<!DOCTYPE html>
<html>
  <head>
	<title>id选择器</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="./css/idOption.css">
  </head>
   <body>
      <div id="box"></div>
   </body>
</html>

css

#box{
	width: 200px;
	height: 200px;
	background-color: green;
}

执行结果
在这里插入图片描述

class选择器

.className
class名称可以重复可以有多个名称重复属性后面的说了算（后加载）但都低于标签优先级
dashed 虚线（属性）
border-radius 圆角（高度和宽度必须保持一致，不然变为椭圆）
三原色 rgb
FF0000 两个255 红色
00FF00绿色
0000FF蓝色
FF00FF紫色
FFFFFF白色
FFFF00黄色
两位一模一样可以简写例如FFF
000黑色其他用工具
HEML

<!DOCTYPE html>
<html>
<head>
	<title>class选择器</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="./css/classOption.css">
</head>
<body>
	<div class="box box1"></div>
	<div class="box"></div>
    <div class="box"></div>
</body>
</html>

CSS

.box{
    border:1px dashed darkturquoise;
    /*darkturquoise  颜色*/
    width: 200px;
    height:200px;
    border-radius: 50%;
   }
   .box1{
   	background-color: #FFFF00;
   }

执行结果
在这里插入图片描述

标签选择器

color:rgb(255,255,0)
rgba(255,255,0,0.5)最后一个表示通透度（0.1-1）
标签{}
HTML

<!DOCTYPE html>
<html>
<head>
	<title>标签选择器</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="./css/biaoqianOption.css">
</head>
<body>
<p>这是一段文字</p>
<p>这是一段文字</p>
</body>
</html>

css

p{
	color: rgb(255,255,0);
	background-color: rgba(255,0,255,0.8);
}

执行结果
在这里插入图片描述

通配符选择器

dotted 点线
html和body之间有间距
reset。css
HTML

<!DOCTYPE html>
<html>
<head>
	<title>通配符标签</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="./css/tongpeifuOption.css">
</head>
<body>
    <button>按钮</button>
</body>
</html>

CSS

*{
	margin: 0;
	padding: 0;
}

执行结果
在这里插入图片描述

复合选择器

.box,#box，div

<!DOCTYPE html>
<html>
<head>
	<title>逗号选择器</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="./css/douhao.css">
</head>
<body>
   <div id="box"></div>
   <div class="box"></div>
</body>
</html>

css

.box,#box{
	border: 1px solid red;
	background-color: green;
	width: 200px;
	height:200px;
}

在这里插入图片描述

ll_j_21

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS基础（一）

1、什么是csscss（cascading style sheet）级联样式表，层叠样式表css主要的目的是用来装扮网页的2、主流的版本css2、css33、如何使用css存在三种使用css的方式|-- 标签样式|-- 内联样式|-- 外联样式w3c在2007年，提出了三层分离原则结构层：HTML表示层：css行为层：JavaScript4、css的选择器|-- 基本...
复制链接

扫一扫

专栏目录