前端开发学习笔记-2-CSS基础内容01

最新推荐文章于 2024-05-08 19:14:37 发布

薛定谔的量子猫.

最新推荐文章于 2024-05-08 19:14:37 发布

阅读量142

点赞数 1

文章标签： css 学习前端

本文链接：https://blog.csdn.net/wsnbb007/article/details/127181186

版权

CSS的定位:

web前端开发由三部分组成：结构（html）、表现（css）、行为（javascript）。

CSS的作用就是将HTML里面散乱的盒子合理得布局在网页的各个位置，并加以装饰美化，让页面变得好看一点。加上CSS的效果如下：

CSS的引入：

css的引入有三种方式，一般开发主要用外链式引入，需要使用link标签引入外部的css文件。

首先需要在根目录创建装CSS的文件夹，再在其中创建以 .css 为后缀名的文件。

然后一般在html的头部使用link标签引入目标css文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入css -->
    <link rel="stylesheet" href="./QQ音乐.css">
</head>

CSS基础内容:

基础选择器

用来选中html中对应盒子的标签,基础选择器主要有四种

标签选择器:

上面的是css
 div{
            
        }


下面的是html
<div>

</div>

标签名{属性:属性值;}

类选择器:


 .box{

        }

<div class="box">
      
</div>

给盒子取类名在类选择器类名前面加 ' . '

id选择器:

#nav {
            

        }

<div id="nav">
      
    </div>

给盒子取id名在id名前加' # '

通配符选择器:

*{
            margin: 0;
            padding: 0;
        }

选择所有标签

复合选择器:

组合使用的选择器

后代选择器:

ul li{ } 用空格隔开选择ul里面的所有li

子选择器:

div>p{ } 用大于号隔开只选择子代的p 孙子不选中

并集选择器:

ul,

div{ } 用逗号隔开和的意思

交集选择器:

选择器1选择器2{ } 紧挨着

伪类选择器:

a:hover{ } 用冒号隔开链接类鼠标经过的时候发生变化

input:focus{ } 选取获得焦点的表单元素

字体属性:font

字体大小:font-size

p { font-size: 20px; }

20像素

字体粗细:font-weight

p { font-weight: normal;}

不加粗 bold加粗

字体样式:font-style

p { font-style: normal;}

清除倾斜italic样式

字体系列:dont-family

p { font-family:"微软雅黑";}

字体复合属性:

body { font: font-style font-weight font-size/line-height font-family;}

必须按顺序书写 size和family必备 line-height是行高

文本属性:

文本颜色:color

div { color: red; }

文本对齐:text-align

div { text-align: center;}

居中对齐center 左对齐left 右对齐right

文本装饰:text-decoration

div { text-decoration：underline；}

none默认 underline下划线 overline上划线 line-through删除线

文本缩进:text-indent

div { text-indent: 10px;}
p { text-indent: 2em;}

一个em等一个默认单位大小

行间距:line-height

p { line-height: 26px;} 一行上边界到下一行上边界的距离

p { line-height: 倍数;} 当前文字大小的倍数

背景:

背景颜色:

background-color:颜色值;

background-color:transparent; 默认值,透明

背景图片:

background-image : url (./img/1.jpg);

url 使用相对或者绝对地址指定背景图片

背景平铺:

background-repeat: no-repeat; 不平铺

repeat-x或者repeat-y 横向或者纵向平铺

背景图片位置:

background-position: x y;

或者用 top | center | botton| left | center | right

背景图像固定:

background-attachment : fixed;

背景复合写法:

background: transparent url(image.jpg) repeat-y fixed top ;

背景色半透明:

background: rgba(0, 0, 0, 0.3);