本文适合CSS零基础的同学阅读
目录
一、什么是CSS?
在学习css之前,我们首先要知道css是什么。
CSS(Cascading Style Sheets):通常称为层叠样式表,用来美化我们的网页。举个例子女生会为了让自己更漂亮选择化妆,那么这里HTML是素颜,css就是化妆。比如文本字体、颜色的变化,或为它添加背景、边框等。
如下列代码:
p{
font-size: 20px;
font-style: italic;
font-weight: bold;
color: red;
}
二、基础语法
选择器{
属性名称1:属性值1;
属性名称2: 属性值2;
}
选择器:html中要应用样式规则的元素标签,如上例中的p,样式只会对p标签产生影响,像其他的标签(如span)就不会受到影响。
三、插入css三种方式
插入css样式的方法一共有三种:内联式、嵌入式以及外链式。
1、内联式
在标签内部使用style属性指出样式,用于单独小样式的调整。
<p style="color:red; font-size:20px;>我是小红<p>
2、嵌入式
在head标签中使用style标签,用于独立案例或单个文件。
<head>
<style>
th,td{
width: 100px;
height: 25px;
text-align: center;
}
</style>
</head>
3、外链式
写成一个单独的css文件,在head标签中使用link标签链接外部文件,用于复杂样式。
<head>
<meta charset="UTF-8">
<title>问卷调查</title>
<link href="base.css" rel="stylesheet" type="text/css">
</head>
注意
1、css样式文件名最好以有意义的英文字母命名,如:base.css。
2、rel=“stylesheet” type="text/css"是固定写法不可更改。
3、优先级:遵循就近原则
四、选择器
选择器{
样式;
}
在{}前面的就是选择器,选择器指明了{}中的样式作用于网页中的哪些元素。
1、元素选择器
就是标签选择器,通过标签名定义css样式。
<head>
<style>
p{
font-size: 20px;
color: pink;
}
</style>
</head>
<body>
<p>白白胖胖,充满希望。</p>
</body>
2、类选择器
通过class定义类名,类选择器前加英文的点(.),类名不能是中文。在开发工程中,使用最为频繁。
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.cute{
font-size: 20px;
color: pink;
}
</style>
</head>
<body>
<p class="cute">白白胖胖,充满希望。</p>
</body>
3、id选择器
通过id名定义,#开头。
<style>
#cute{
font-size: 20px;
color: pink;
}
</style>
====================朴实无华的分割线====================
<p id="cute">白白胖胖,充满希望。</p>
类选择器和id选择器的区别
相同点: 可以应用于任何元素。
不同点:id选择器只能使用一次,而类选择器可以使用多次。即id名在文档中的存在是唯一的,不可以重复,而类名可以被应用于多个标签。
4、关系选择器
(1)同伴关系
不同的选择器之间用逗号(,)连接。
选择器1,选择器2{属性: 值;}
(2)子关系
子选择器仅指他的直接后代,即第一代后代。不同选择器之间用大于号(>)连接。
选择器1>选择器2{属性: 值;}
(3)后代关系
后代选择器是作用于所有子后代元素。不同选择器之间用空格连接。
选择器1 选择器2{属性: 值;}
5、通用选择器
功能最强大的选择器,作用于所有标签,使用星号(*)指定。
<style>
*{
color: purple;
}
</style>
====================朴实无华的分割线====================
<p id="cute">白白胖胖,充满希望。</p>
<span>古娜拉黑暗之神,呜呼啦呼,黑魔变身</span>
<h4>巴啦啦能量,沙罗沙罗,小魔仙全身变</h4>
6、伪类选择器
伪类选择器允许给html不存在的标签设置样式。
选择器 | 作用 |
---|---|
a:link | 链接没被访问时的样式 |
a:visited | 链接被访问后的样式 |
a:hover | 鼠标悬浮在链接上时的样式 |
a:active | 鼠标点击链接时的样式 |
:target | 链接跳转到锚点,锚点元素的样式 |
注意
a:hover必须置于a:link和a:visited之后才有效
a:active必须置于a:hover之后才有效
7、选择器优先级
行间选择器>>>id选择器>>>类选择器>>>标签选择器
五、CSS样式
1、颜色
- 英文单词表示。如color:red;
- 十六进制表示,颜色代码自行搜索。#开头,使用3个双位数编写。
- 十进制表示。rgb(0-255,0-255,0-255)
透明度 rgba(0-255,0-255,0-255,0-1) 0表示全透明,1表示全部透明
2、字体
属性 | 意义 |
---|---|
font-size | 字体大小 |
font-weight | 字体粗细(数值表示:100~900。bold(粗体)lighter(细的)) |
font-family | 字体 |
font-style | 字体风格(normal:正常 italic:斜体) |
3、文本
属性 | 意义 |
---|---|
text-indent | 首行缩进,一个汉字16px |
text-align | 水平对齐方式。left,center,right |
line-height | 行间距,规定了盒子高度才有效果。如果与盒子高度相同,文字垂直居中。 |
vertical-align | 设置字体相对于图片的位置,但要设置在图片样式处 |
text-decoration | overline:上划线 line-through:中划线 underline:下划线 none:取消线 |
4、背景
属性 | 意义 |
---|---|
background-color | 背景颜色 |
background-image | 背景图片 |
background-repeat | 背景重复。repeat-x:水平方向重复,repeat-y:垂直方向重复,no-repeat:不重复 |
background-position | 背景图片位置。英文单词表示:top,bottom,left,right,center 像素表示:x,y(以顶点为参照) |
background-size | 背景大小 |
background-attachment | 背景图像是否固定。srcoll:随页面滚动(默认),fixed:固定 |
六、CSS框模型
1、内边距(padding)
边框和内容之间的空白区域
padding-top、padding-bottom、padding-left、padding-right
2、外边距(margin)
边框外部的空白区域,属性值可为任何长度单位、百分数值、负值。
如果缺少左外的值,使用右外的;缺少下外、右外的值,使用上外的。
margin-top、margin-bottom、margin-left、margin-right
注意
简写内外边距的四个值按顺时针取值,即上 右 下 左
3、边框(border)
属性 | 意义 |
---|---|
border-style | 边框样式。solid:实线,dotted:点线,dashed:虚线,double:双线,groove:3D线 |
border-width | 边框宽度。可以指定宽度,如2px、2em。也可以用单词表示 :thin、medium(默认值)、thick |
border-color | 边框颜色。transparent:透明边框 |
border-radius | 边框圆角 。 |
边框也可以分开写:border-top、border-right、border-bottom、border-left
<style>
div{
width: 400px;
height: 54px;
margin: auto;
border-top-width: 1px;
border-top-style: dashed;
border-top-color: #ff0000;
border-bottom: 3px solid #666666;
font-family: 微软雅黑;
font-weight: bold;
font-size: 20px;
color: royalblue;
text-indent: 16px;
line-height: 54px;
}
</style>
====================朴实无华的分割线====================
<div>
前程似锦
</div>
七、CSS定位
1、定位(position)
属性值 | 意义 |
---|---|
static | 元素框正常生成。 |
relative | 相对定位。元素框偏移某个距离。 |
absolute | 绝对定位。元素框从文档流完全删除,并相对其包含块定位。 |
fixed | 固定定位。相对于视窗定位。 |
2、块级元素、行内元素、行内块元素
元素、标签类型 | 说明、特点 | 举例 |
---|---|---|
块级元素 | 独占一行,支持所有的样式,默认宽度为父元素的100% | div,p,h1-h6,ol,ul,li,dl,dd,dt |
行内元素 | 不会独占一行,元素和元素之间并列显示在一行,只是支持部分css样式,不支持宽高属性,不支持margin的上下,元素的高和宽由内容撑开 | a,span,em,b,i,strong,img (支持上下) |
行内块元素 | 元素 并在一行,代码换行,元素间会产生间距。支持全部样式。如果没有设置宽高,宽高由内容撑开。 | 新增加元素类型,现有的标签类型没有行内块,可以使用display将块级元素和行内元素转换为行内块元素 |
display属性
属性值 | 意义 |
---|---|
none | 元素隐藏,不占用位置 |
inline | 以行内元素显示 |
block | 以块元素显示 |
inline-block | 以行内块元素显示 |
3、元素溢出(overflow)
子元素内容超出父元素边界
属性值 | 意义 |
---|---|
visible | 不采取处理方式(默认),超出部分显示在父类元素外面。 |
hidden | 超出部分隐藏 |
srcoll | 超出部分增加滚动条(垂直+水平) |
auto | 根据超出部分自动增加滚动条 |
text-overflow:ellipsis ——文字超出部分展示为3个点(…)
4、浮动(float)
(1)文档流
文档流指的是盒子按照HTML标签编写顺序依次从上到下,从左到右的顺序排列,块元素独占一行,行内元素在同一行从左到右依次排列,先写的先排,后写的后排列,每个盒子有自己的位置。
(2)浮动特性
浮动指的是标签浮动到指定的位置上,浮动之后不会和之前的元素保持同一层。
- 浮动会脱离文档流,不再占用位置,会覆盖后面的没有浮动的元素
- 浮动只有两个方向,即左浮动(left)和右浮动(right)
- 浮动会造成文字环绕的效果
- 停止浮动
1、当浮动碰到父元素的边界停止浮动
2、如果前面有浮动的元素,碰到前面的浮动元素并列一排显示
3、如果前面有未浮动元素的元素,换行浮动
4、当浮动的元素的宽度,超过父类元素的边界的时候,自动换行
(3)清除浮动
如果父元素没有设置高度,当元素浮动起来之后,无法继续撑开父类元素的高度,基于此解决方案就是清除浮动。
- 方法一:给父类元素设置高度。
- 方法二:在最后一个子元素增加一个空的div,然后设置样式,不推荐使用,代码冗余,所以这里不举例子。
- 方法三:使用成熟的样式,推荐。如下: