一、CSS简介
CSS是级联样式表(Cascading Style Sheets)的缩写。HTML 用于撰写页面的内容,而 CSS 将决定这些内容该如何在屏幕上呈现。
网页的内容是由 HTML的元素构建的,这些元素如何呈现,涉及许多方面,如整个页面的布局,元素的位置、距离、颜色、大小、是否显示、是否浮动、透明度等等。
二、CSS语法
CSS主要用选择器来进行选择属性值,分为三种,有元素选择器、id选择器、class选择器
选择器——用{}包含的声明,可以是多条声明。
声明以一个属性和一个值组成,同时多条声明可以用:分割。
一个属性对应一个值。属性与值之间用:分割。
元素选择器:
p{
color:red;/*颜色设置为红色*/
text-align:center; /* 文本居中 */
}
id选择器
id选择器前有#号。
#msy{
color: red;/*颜色设置为红色*/
}
class选择器
/* 注意:class选择器前有 . 号。 */
.center{
text-align: center;//居中
}
.large{
font-size: 30px;//字号
}
.red{
color: red;//颜色
}
三、CSS的样式
一般有三种方法:外部样式表,内部样式表,内联样式
三种样式的优先级如下:
内联样式
内部样式表或外部样式表
浏览器缺省样式
四、CSS相关使用
1.颜色
我们将颜色放入到我们的.css文件中,代码如下
body {
background-color: linen;
text-align: center;
}
h1 {
color: red;
}
.haha {
margin-top: 100px;
color: chocolate;
font-size: 50px;
}
然后创建如下html文件
我们来看一下结果
2.尺寸
我们可以用 height 和 width 设定元素内容占据的尺寸。常见的尺寸单位有:像数 px,百分比 %等。
新建如下 HTML 文件:
<html>
<head>
<link rel="stylesheet" href="./mycss.css">
</head>
<body>
<div class="example-1">
frist
</div>
<div class="example-2">
second
</div>
</body>
</html>
再构建如下CSS文件
.example-1 {
width: 100%;
height: 200px;
background-color: powderblue;
text-align: center;
}
.example-2 {
height: 100px;
width: 500px;
background-color: rgb(73, 138, 60);
text-align: right;
}
效果如下
3.对齐
对于元素中的文本,我们可以简单的设置text-align属性为left, center, right即可(显然缺省的是左对齐),上例中已有相关的应用。
4.盒子模型
盒子模型指的是一个 HTML 元素可以看作一个盒子。从内到外,这个盒子是由内容 content, 内边距 padding, 边框 border, 外边距 margin构成的。
Content 盒子的内容,如文本、图片等
Padding 填充,也叫内边距,即内容和边框之间的区域
Border 边框,默认不显示
Margin 外边距,边框以外与其它元素的区域
构建如下css文件
.box1 {
height: 200px;
width: 200px;
background-color:#615200;
color: aliceblue;
border: 10px solid red;
padding: 25px;
margin: 25px;
}
.box2 {
height: 300px;
width: 300px;
background-color:#004d61;
color: aliceblue;
border: 10px solid blue;
padding: 25px;
margin: 25px;
}
效果如下
5.边框与边距
代码测试
<p class="example-1">first</p>
<p class="example-2">second</p>
<p class="example-3">third</p>
<p class="example-4">four</p>
.example-1 {
border: 1px dotted black; /* 上下左右都相同 */
}
.example-2 {
border-bottom: 1px solid blue; /* 只设置底部边框 */
}
.example-3 {
border: 1px solid grey;
border-radius: 15px; /* 边框圆角 */
}
.example-4 {
border-left: 5px solid purple;
}
我们看一下效果
6.定位
position属性用于对元素进行定位,属性值有static 静态、relative 相对、fixed 固定、absolute 绝对。
static
静态定位position: static;默认定位方式,将把元素相对于他的静态(正常)位置进行偏移。
<!-- HTML -->
<div class="example-relative">我偏移了正常显示的位置。去掉我的样式对比看看?</div>
<!-- CSS -->
.example-relative {
position: relative;
left: 60px;
top: 40px;
background-color: rgb(173, 241, 241);
}
我们验证一下:
fixed
设置为固定定位position: fixed;元素固定不动
此时元素固定的位置仍由top, bottom, left, right属性确定,可以用来设置页面按钮。
<!-- HTML -->
<div class="broad">占位区域。请将浏览器窗口改变大小,看看右下角的按钮发生了什么?</div>
<div class="example-fixed">按钮</div>
<!-- CSS -->
.example-fixed {
position: fixed;
bottom: 40px;
right: 10px;
padding: 6px 24px;
border-radius: 4px;
color: #fff;
background-color: #9d0f0f;
cursor: pointer;
box-shadow: 0 3px 3px 0 rgba(0,0,0,0.3), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
}
.broad {
height: 5000px;
width: 5000px;
padding: 20px;
background-color: darkkhaki;
}
我们验证一下发现生成了一个按钮
8.溢出
溢出是来处理当元素内容超过其指定的区域时
溢出属性分别有:
visible 默认值,溢出部分会在区域外面显示
hidden 抛弃溢出部分
scroll 裁剪溢出部分,但提供上下和左右滚动条供显示
auto 裁剪溢出部分,视情况提供滚动条
<!-- HTML -->
<div class="example-overflow-scroll-y">You can use the overflow property when you want to have better control of the
layout. The overflow property specifies what happens if content overflows an element's box.
</div>
<!-- CSS -->
.example-overflow-scroll-y {
width: 200px;
height: 100px;
background-color: #eee;
overflow-y: scroll;
}
我们来验证一下:
9.浮动
在一个区域或容器内,设置float属性让某元素水平方向上向左或右进行移动,其周围的元素也会重新排列
<html>
<head>
<style>
.example-float-right {
float: right;
}
</style>
</head>
<body>
<img src="picture.jpg" class="example-float-right" alt="">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quidem, architecto officiis, repellendus
corporis obcaecati, et commodi quam vitae vel laudantium omnis incidunt repellat qui eveniet fugiat totam
modi nam vero!</p>
</body>
</html>
9.透明度
用opacity对任何元素(不过常用于图片)设置不透明度。
值在[0.0~1.0]之间,值越低,透明度越高。
我们构建如下代码
浏览器结果如下
10.组合选择器
将三种选择器:元素、id 和 class进行组合,简洁精确。
后代选择器
以空格作为分隔,如:.haha p 代表在div元素内有.haha这种类的所有元素。
<html>
<head>
<style>
.haha p {
background-color: yellow;
}
</style>
</head>
<body>
<div class="haha">
<p>Paragraph 1 in the div .haha.</p>
<p>Paragraph 2 in the div .haha>.</p>
<span>
<p>Paragraph 3 in the div .haha.</p>
</span>
</div>
<p>Paragraph 4. Not in a div .haha.</p>
<p>Paragraph 5. Not in a div .haha.</p>
</body>
</html>
子选择器
直接后代选择器,以>作为分隔,如:.haha > p 代表在有.haha类的元素内的直接元素。
<html>
<head>
<style>
.haha > p {
background-color: yellow;
}
</style>
</head>
<body>
<div class="haha">
<p>Paragraph 1 in the div .haha.</p>
<p>Paragraph 2 in the div .haha.</p>
<span>
<p>Paragraph 3 in the div .haha - it is descendant but not immediate child.</p>
</span> <!-- not Child but Descendant -->
</div>
<p>Paragraph 4. Not in a div .haha.</p>
<p>Paragraph 5. Not in a div .haha.</p>
</body>
</html>
11.伪类和伪元素
伪类(pseudo-class)或伪元素(pseudo-element)用于定义元素的某种特定的状态或位置等。
使用伪类/伪元素的语法如下:
/* 选择器后使用 : 号,再跟上某个伪类/伪元素 */
selector:pseudo-class/pseudo-element {
property:value;
}
以上是我对css的总结