CSS入门


其他 前端知识:

前端的基本概念

HTML常用标签

CSS入门

JavaScript 基础

DOM模型和事件

前端教程网站:

菜鸟教程

w3school

绿叶学习网


一、CSS引入方式

有三种方式:外部样式表,内部样式表,行内样式表。

1、外部样式表

最常用。

CSS代码和HTML代码都单独放在不同文件中,然后在HTML文档中使用link标签来引用CSS样式表。

<link rel="stylesheet" type="text/css" href="CSS文件路径" />

rel取值固定为stylesheet,表示引入的是CSS文件。

type取值固定为text/css,表示这是标准的CSS。

2、内部样式表

把HTML代码和CSS代码放到同一个HTML文件中。

CSS代码放在style标签内,style标签是放在head标签内。

<head>
    <meta charset="utf-8"/>
    <title></title>
    <style type="text/css">
        div{color:red;}
    </style>
</head>

3、行内样式表

不推荐。

把HTML代码和CSS代码放到同一个HTML文件中。

CSS代码在“标签的style属性”中定义,而不是在“style标签”内定义。

<div style="color:red;">CSS</div>

二、CSS选择器

CSS选择器就是将想要添加CSS样式的元素选中,有很多种方法,这些不同的方法就是不同的选择器。

常见的CSS选择器有5种:元素选择器、id选择器、class选择器、后代选择器、群组选择器。

CSS选择器格式:

选择器
{
    属性1 : 取值1;
    ……
    属性n : 取值n;
}

1、元素选择器

举例:

div{color:red;}

把页面中所有的div元素选中,然后定义它们文本颜色为红色。

2、id选择器

元素最基本的属性是id和class。

id和class都是用来选择元素,以便进行CSS操作或者JavaScript操作。

id属性具有唯一性。

对于id选择器,id名前面必须要加上前缀“#”,否则该选择器无法生效。

id名前面加上“#”,表示这是一个id选择器。

举例:

#idname{color:red;}

3、class选择器(类选择器)

可以为同一个页面的相同元素或者不同元素设置相同的class,然后使得相同class的元素具有相同的CSS样式。

class名前面必须要加上前缀英句号(.),否则该选择器无法生效。

类名前面加上英文句号,表明这是一个class选择器。

举例:

 .classname{color:red;}

4、后代选择器

选择元素内部中所有的某一种元素

举例:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        #father1 div{color:red;}
        #father2 #p1{color:blue;}
    </style>
</head>
<body>
    <div id="father1">
        <div>CSS</div>
        <div>CSS</div>
    </div>
    <div id="father2">
        <p id="p1">CSS</p>
        <p id="p2">CSS</p>
        <span>CSS</span>
    </div>
</body>
</html>

效果图:
在这里插入图片描述

5、群组选择器

指同时对几个选择器进行相同的操作。

两个选择器之间英文逗号(,)隔开。

#idname,.classname,p,span {color:red;}

6、相邻选择器

操作对象是该元素的同级元素。

选中该元素的下一个兄弟元素。

举例:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        #idname+div{color:red;}
    </style>
</head>
<body>
    <div>CSS</div>
    <div>CSS</div>
    <div id="idname">
        <p>CSS</p>
    </div>
    <div>CSS</div>
    <div>CSS</div>
</body>
</html>

效果图:
在这里插入图片描述

三、字体样式

表3 字体属性
属性说明举例
font-family字体类型font-family: “Times New Roman”;
font-size字体大小(宽高)font-size:15px;
font-weight字体粗细font-weight:bold;
font-style字体斜体font-style:italic;
color颜色color:gray;或者color:#808080;
font-family属性:字体类型只有一个英文单词,则、不需要加上双引号;若是多个英文单词或者中文的,则需要加双引号。

#000000是黑色,#FFFFFF是白色。

16进制RGB值在线获取:
Online Color Picker

四、文本样式

字体样式针对文字本身,使用”font“前缀。

文本样式针对整个段落。使用”text“前缀。

1、首行缩进:text-indent

举例:

<style type="text/css">
    p
    {
        font-size:14px;
        text-indent:28px;
    }
</style>

首行缩进两个中文字符,text-indent值设为font-size值的2倍。

2、水平对齐:text-align

text-align对文本和图片(img元素)均有效。

表 4-2 text-align属性
属性说明
left左对齐(默认值)
center居中对齐
right右对齐

3、文本修饰:text-decoration

表 4-3 text-align属性
属性说明
none去除所有的划线效果(默认值)
underline下划线
line-through中划线
举例:去除超链接元素中的下划线
a{text-decoration:none;}

4、大小写转换:text-transform

表 4-4 text-text-transform属性
属性说明
none无转换(默认值)
uppercase转换为大写
lowercase转换为小写
capitalize只将每个英文单词首字母转换为大写

5、行高和间距

行高line-height

字间距letter-spacing

单词间距word-spacing

行高是指”一行的高度“,而行间距是指”两行文本之间的距离“。

五、边框样式

表 5 边框属性
属性说明取值
border-width边框的宽度像素值
border-style边框的外观dashed虚线、solid实线
border-color边框的颜色关键字或16进制RGB值
举例:
border-width: 1px;
border-style: solid;
border-color: red;

等价于以下简写形式

border: 1px solid red;

上边框border-top、下边框border-bottom、左边框border-left、右边框border-right同样可以按照上例进行简写。

去除某一边框可以将其设置成0px或写成none。

六、列表样式

list-style-type属性是针对ol或者ul元素的,而不是li元素。

表6-1 有序列表ol的list-style-type属性
属性说明
decimal1、2、3…(默认值)
lower-roman:i、ii、iii…
upper-romanI、II、III…
lower-alphaa、b、c…
upper-alphaA、B、C…
表6-2 无序列表ul的list-style-type属性
属性说明
disc实心圆●(默认值)
circle空心圆○
square正方形■

去除列表符号:

list-style-type: none;

定义列表项图片:

list-style-image: url(图片路径);

七、表格样式

1、表格标题位置:

caption-side: 取值; /*取值为top、bottom*/

2、表格单元格间空隙:

举例:表格边框合并

<style type="text/css">
    table,th,td{border:1px solid silver;}
    table{border-collapse: collapse;}
</style>

border-collapse默认值为separate,表示边框分开,有空隙。

3、表格边框间距:

border-spacing: 像素值;

八、图片样式

1、图片对齐

(1)水平对齐

text-align属性取值为left、center、right

举例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        div
        {
            width: 300px;
            height: 80px;
            border: 1px solid silver;
        }
        .div1{ text-align: left; }
        .div2{ text-align: center; }
        .div3{ text-align: right; }
         img{ width: 60px; height: 60px; }
    </style>
</head>
<body>
    <div class="div1">
        <img src="img/girl.gif" alt=""/>
    </div>
    <div class="div2">
        <img src=" img/girl.gif" alt=""/>
    </div>
    <div class="div3">
        <img src=" img/girl.gif" alt=""/>
    </div>
</body>
</html>

图片的水平对齐不是在img元素中定义,而是在其父元素中定义。

(2)垂直对齐

vertical-align取值为top(顶部对齐)、middle(中部对齐)、baseline(基线对齐)、bottom(底部对齐)

2、文字环绕

float取值为left(元素向左浮动)、right

举例:

<style type="text/css">
   img{float:left;}
   p{
       font-family:"微软雅黑";
       font-size:12px;
    }
</style>

九、背景样式

可以使用background或者bgcolor这两个“HTML属性”来为元素定义背景颜色或背景图片。现在,对于元素的背景样式,都是使用CSS属性来实现。

1、背景颜色

background-color: 颜色值;

color用于定义字体颜色。

2、背景图片样式

background-image: url(图片路径);

其中,图片路径可以加双引号,也可以不加。

举例:不显示背景图片(宽度和高度都为0)

div{background-image: url(img/haizei.png);}

举例:可以正确显示

div
{
    width:250px;
    height:170px;
    background-image: url(img/css.png);
}

3、背景图片位置

background-position: 像素值/关键字;

background-position属性常用取值有两种:一种是“像素值”;另外一种是“关键字”

(1)像素值

要同时设置水平方向和垂直方向的数值,表示背景图片距离该元素左上角的水平方向距离,垂直方向距离。

水平距离和垂直距离这两个数值之间要用空格隔开,两者取值都是像素值。

举例:

    <style type="text/css">
        div
        {
            width:300px;
            height:200px;
            border:1px solid silver;
            background-image:url(img/css.png);
            background-repeat:no-repeat;
            background-position:40px 20px;
        }
    </style>

(2)关键字
也要同时设置水平方向和垂直方向的值

background-position: 水平距离 垂直距离;

****

十、超链接样式

1、默认样式

(1)鼠标样式

当鼠标移入网页上的某个超链接时,其样式会变为一只小手;当鼠标移出超链接区域时,样式会再次回到箭头形状。

(2)颜色及下划线

默认情况:字体为蓝色,带有下划线;

鼠标点击时:字体为红色,带有下划线;(一瞬间)

鼠标点击后:字体为紫色,带有下划线;
在这里插入图片描述
如果某一个地址的超链接在之前被点击过,浏览器就会记下你的访问记录。那么下次你再用这个地址作为超链接地址时,显示的是紫色.

清空浏览器的历史记录会让超链接的颜色再次变回蓝色。

2、超链接伪类

用来定义超链接在鼠标点击的不同时期的样式。

a:link{…}
a:visited{…}
a:hover{…}
a:active{…}

必须按照“link、visited、hover、active”的顺序进行,不然浏览器可能无法正常显示这4种样式。
记忆方法:love hate,“爱恨原则”。

不是每个超链接都必须定义这4种状态,实际开发中,只会用到两种状态:未访问时状态和鼠标经过时状态(a:hover)。

对于未访问时状态(默认状态),直接针对a元素定义即可,没必要使用a:link

表10-1 超链接伪类
伪类说明
a:link定义a元素未访问时的样式
a:visited定义a元素访问后的样式
a:hover定义鼠标经过a元素时的样式
a:active定义鼠标点击激活时的样式

举例:

<style type="text/css">
    a
    {
        color:red;
        text-decoration: none;
    }
    a:hover
    {
        color:blue;
        text-decoration:underline;
    }
</style>

结果:未访问时是红色,鼠标经过时是带下划线的蓝色。

3、:hover的其他用法

元素:hover{…}

举例:使用:hover为div元素定义鼠标经过时就改变背景色

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        div
        {
            width:100px;
            height:30px;
            line-height:30px;
            text-align:center;
            color:white;
            background-color: lightskyblue;
        }
        div:hover
        {
            background-color: hotpink;
        }
    </style>
</head>
<body>
    <div>css</div>
</body>
</html>

结果:默认蓝底白字,鼠标经过时是粉红背景白字。

举例::hover为img元素定义鼠标经过时就为其添加一个边框。

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        img:hover
        {
            border:2px solid red;
        }
    </style>
</head>
<body>
    <img src="img/css.gif" alt="">
</html>

4、鼠标样式

(1)浏览器鼠标样式

cursor: 取值;

cu'e

(2)自定义鼠标样式

cursor: url(鼠标图片地址), 属性值;

“属性值”一般为3种:default、pointer和text。

十一、CSS盒子模型

所有元素都可以看成一个盒子。

表 盒子模型组成部分
属性说明
content内容,可以是文本或图片
padding内边距,用于定义内容与边框之间的距离
margin外边距,用于定义当前元素与其他元素之间的距离
border边框,用于定义元素的边框
在这里插入图片描述

1、内容区

必备,其余组成部分均可选。

内容区有3个属性:width、height和overflow。

使用width和height属性可以指定盒子内容区的高度和宽度。

width和height这两个属性是针对内容区content而言,不包括padding部分。

当内容过多超出width和height时,可以使用overflow属性来指定溢出处理方式。

只有块元素可以设置width和height,行内元素无法设置width和height。

可以使用display属性将行内元素转换为块元素,也可以将块元素转换为行内元素。

2、内边距

常被称为“补白”。

指内容区和边框之间的空间,可以看成是内容区的背景区域。

内边距的属性有5种:padding-top、padding-bottom、padding-left、padding-right以及综合了以上4个方向的简写内边距属性padding

padding写法有如下3种:

padding: 像素值;
padding: 像素值1 像素值2;
padding: 像素值1 像素值2 像素值3 像素值4;

举例:
padding:20px表示4个方向的内边距都是20px。

padding:20px 40px表示padding-top和padding-bottom为20px,padding-right和padding-left为40px。

padding:20px 40px 60px 80px表示padding-top为20px,padding-right为40px,padding-bottom为60px,padding-left为80px。

按照顺时针方向记忆。

让文本在一个元素内部居中,可以使用padding来实现。

3、外边距

指两个盒子之间的距离,使元素不紧凑的连接在一起。

外边距的属性也有5种:margin-top、margin-bottom、margin-left、margin-right以及综合了以上4个方向的简写外边距属性margin。

4、边框

CSS入门中五、边框样式一样。


参考:

绿叶学习网

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值