CSS
程序员文章站
2022-05-05 18:36:02
...
CSS基础
1.什么是CSS？
CSS概述:
Cascading Style Sheets : 层叠样式表
主要用作用:
用来美化我们的HTML页面的
HTML 决定网页的骨架 ,CSS 化妆
将页面的HTML和美化进行分离，提高代码复用性
CSS的简单语法:
在一个style标签中,去编写CSS内容,最好将style标签写在这个head标签中
<style>
选择器{
属性名称:属性的值;
属性名称2: 属性的值2;
}
</style>
2.CSS选择器
元素选择:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/**
元素的名称{
属性名称:属性的值;
属性名称:属性的值;
}
*/
span{
color: red;
}
</style>
</head>
<body>
<span>HelloWorld!</span>
<span>HelloWorld!</span>
<span>HelloWorld!</span>
<span>HelloWorld!</span>
</body>
</html>
ID选择器:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/**
* 以#号开头 ID在整个页面中必须是唯一的s
#ID的名称{
属性名称:属性的值;
属性名称:属性的值;
}
*/
#span1{
color: blue;
}
#span2{
color: red;
}
</style>
</head>
<body>
<span id="span1">HelloWorld!</span>
<span id="span2">HelloWorld!</span>
<span>HelloWorld!</span>
<span>HelloWorld!</span>
</body>
</html>
类选择器:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/**
以 . 开头
.类的名称{
属性名称:属性的值;
属性名称:属性的值;
}
*/
.fruit{
color: yellow;
}
.vegetable{
color: red;
}
</style>
</head>
<!--
水果类，改成黄色
蔬菜类，改成红色
-->
<body>
<div class="fruit">香蕉</div>
<div class="vegetable">黄瓜</div>
<div class="fruit">苹果</div>
<div class="vegetable">茄子</div>
<div class="fruit">哈密瓜</div>
</body>
</html>
其他选择器：
-
选择器分组: 选择器1,选择器2{ 属性的名称:属性的值}
-
属性选择器:
a[title] a[titile='aaa'] a[href][title] a[href][title='aaa'] -
后代选择器: 爷爷选择器 孙子选择器 找出所有的后代
-
子元素选择器: 父选择器 > 儿子选择器
-
伪类选择器: 通常都是用在A标签上
3. 引入方式
内部样式：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/**
* 正常的使用模式就是内部样式
*/
.fruit{
color: yellow;
}
.vegetable{
color: red;
}
</style>
</head>
<body>
<div class="fruit">香蕉</div>
<div class="vegetable">黄瓜</div>
<div class="fruit">苹果</div>
<div class="vegetable">茄子</div>
<div class="fruit">哈密瓜</div>
</body>
</html>
外部样式:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
外部样式: 通过link标签引入一个外部的css文件
多个页面使用同一个格式的时候，提取CSS出来，做一个文件
提高代码的复用性
-->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="fruit">香蕉</div>
<div class="vegetable">黄瓜</div>
<div class="fruit">苹果</div>
<div class="vegetable">茄子</div>
<div class="fruit">哈密瓜</div>
</body>
</html>
行内样式:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--通过行内样式修改属性-->
<div class="fruit" style="color: yellow;">香蕉</div>
<div class="vegetable">黄瓜</div>
<div class="fruit">苹果</div>
<div class="vegetable">茄子</div>
<div class="fruit">哈密瓜</div>
</body>
</html>
4.浮动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
css浮动:浮动的元素会脱离正常的文档流，在正常的文档流中不占空间（会导致看不到）
float属性:
left
right
clear属性: 清除浮动
both : 两边都不允许浮动
left: 左边不允许浮动
right : 右边不允许浮动
流式布局:拉动页面的时候，它根据页面缩小改变
-->
<div style="float:left;width: 200px ;height:
200px;background-color: red;"></div>
<div style="width: 250px ;height: 200px;background-color:
blue;"></div>
<div style="width: 200px ;height: 200px;background-color:
yellow;"></div>
<div style="width: 200px ;height: 200px;background-color:
green;"></div>
</body>
</html>
5.盒子模型
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
内边距：
padding-top:
padding-right:
padding-bottom:
padding-left:
padding:10px; 上下左右都是10px
padding:10px 20px; 上下是10px 左右是20px
padding: 10px 20px 30px; 上 10px 右20px 下30px 左20px
padding: 10px 20px 30px 40px; 上右下左, 顺时针的方向
外边距:
margin-top:
margin-right:
margin-bottom:
margin-left:
-->
<div style="border:3px solid red ; width: 400px; height:
400px;" >
<div style="border:1px solid gray; width: 150px;
height: 150px;padding: 10px 20px 30px;">肾7plus</div>
<div style="border:1px solid yellow; width: 150px;
height: 150px;">华为P9</div>
</div>
</body>
</html>
绝对定位
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
CSS绝对定位:
position: absolute
top: 控制距离顶部的位置
left: 控制距离左边的位置
-->
<div style="border: 5px solid red; width: 400px; height:
400px;position: absolute;top: 200px;left: 200px;">
黑马程序员
</div>
</body>
</html>
上一篇： 浏览器的组成
推荐阅读
-
2-6 复杂的背景图案_html/css_WEB-ITnose
-
网页中多个图标在一张图片上，使用css将各图标显示_html/css_WEB-ITnose
-
【学习笔记之CSS+DIV】CSS入门_html/css_WEB-ITnose
-
nth-of-type在选择class的时候需要注意的一个小问题_html/css_WEB-ITnose
-
CSS+DIV设计å®ä¾ï¼å®ç°è®©å¤ä¸ªDIVæåæ¶å± ä¸_html/css_WEB-ITnose
-
第 7 章 文档元素_html/css_WEB-ITnose
-
css如何将新闻列表前面的点去掉_html/css_WEB-ITnose
-
CSS中可以和不可以继承的属性实例讲解
-
css3 box-shadow阴影图文教程
-
div+css总结?FF下div不设置…_html/css_WEB-ITnose