layout: post
title: CSS学习日记
subtitle: JavaWeb学习
date: 2017-11-12
author: ZL
header-img: img/css.jpg
catalog: true
tags:
- CSS
- HTML
- JavaWeb
CSS学习日记
相关概念
- CSS：Cascading Style Seets层叠样式表
- div：HTML标签独立一行结合CSS使用
- Span：HTML标签，不独立行，结合CSS使用
语法规范
选择器{
属性名：属性值;
属性名：属性值;
属性名：属性值;
}
引入方式
- 行内引入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS</title>
</head>
<body>
<div style="color: crimson;font-size: 80px">
1234567890
</div>
</body>
</html>
- 内部引入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style>
div{
color: crimson;
font-size: 100px;
}
</style>
</head>
<body>
<div>
1234567890
</div>
</body>
</html>
- 外部引入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS</title>
<link rel="stylesheet" type="text/css" href="03.css"/>
</head>
<body>
<div>
1234567890
</div>
</body>
</html>
css选择器
通过选择器选择到想要的位置进行属性设置
id选择器是具体的选择
元素选择器和类选择器都是多选
- ID选择器
#id属性名{
属性名1:属性值1;
属性名2:属性值2;
属性名3:属性值3;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style>
#number{
color: crimson;
font-size: 100px;
}
#letters{
color: blueviolet;
font-size: 200px;
}
</style>
</head>
<body>
<div id="number">
1234567890
</div>
<div id="letters">
ancdefghijk
</div>
</body>
</html>
- 元素选择器
元素名{
属性名1:属性值1;
属性名2:属性值2;
属性名3:属性值3;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style>
div{
color: blue;
font-size: 70px;
}
p{
/*对所有的p标签都会有影响*/
color: cadetblue;
font-size: 60px;
}
</style>
</head>
<body>
<div id="number">
1234567890
<p>yyyyyyyyyyyyyyyyyyyyyyyy</p>
</div>
<p>xxxxxxxxxxxxxxxxxx</p>
</body>
</html>
- 类选择器
.类名{
属性名1:属性值1;
属性名2:属性值2;
属性名3:属性值3;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>类选择器</title>
<style>
.div2{
font-size: 30px;
color: gold;
}
</style>
</head>
<body>
<div>
逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！11
</div>
<div class="div2">
逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！22
</div>
<div>
逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！33
</div>
<div class="div2">
逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！44
</div>
<div>
逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！55
</div>
</body>
</html>
-
层级选择器
css层级选择器 -
属性选择器
CSS属性选择器
PS
-
清除浮动
clear：both；
-
去掉超链接的下划线
a{
text-decoration:none;
}
-
让快级元素成为内联元素
display：inline
-
让div居中
margin：auto
-
快级元素内容居中
text-align：center
border，padding，margin
border：边框的宽度
padding：内容距离外框的距离
margin：外框距离外外框的距离
