CSS入门

已于 2024-01-04 14:40:53 修改
阅读量2.8k 收藏 14
点赞数 5
CC 4.0 BY-SA版权
分类专栏： 前端 文章标签： css 前端 html
于 2022-01-29 18:02:44 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/xiaoyu_alive/article/details/122745186

目录

其他 前端知识：

前端的基本概念

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、付费专栏及课程。

余额充值