CSS：页面美化和布局控制

最新推荐文章于 2024-07-29 09:17:12 发布

高思语

最新推荐文章于 2024-07-29 09:17:12 发布

阅读量192

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/gaisiyu/article/details/115306563

版权

CSS：页面美化和布局控制

概念：Cascading Style Sheets 层叠样式表

层叠：多个样式可以作用在同一个HTML元素上，同时生效

好处：

1、功能强大

2、将内容展示和样式控制分离：降低耦合度（解耦）、让分工协作更容易、提高开发效率

CSS的使用：CSS与HTML结合方式

1、内联样式：

在标签内使用style属性指定CSS代码

<div style="color:red;">hello css</div>

2、内部样式

在head标签内，定义style标签，style标签的标签体内容就是CSS代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            color:blue;
        }
    </style>
</head>
<body>
    <div>hello css</div>
</body>
</html>

3、外部样式

1、定义CSS资源文件

div{
    color: blue;
}

2、在head标签内，定义link标签，引入外部的资源文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="CSS/a.css">
</head>
<body>
    <div>hello css</div>
</body>
</html>

3、还可以在head标签内，定义style标签，引入外部的资源文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        @import "CSS/a.css";
    </style>
</head>
<body>
    <div>hello css</div>
</body>
</html>

注意：

1、2、3种方式，CSS作用范围越来越大

1方式不常用，后期常用2、3方式

CSS基本语法：

格式：

选择器{

属性名1：属性值1；

属性名2：属性值2；

…

}

选择器：筛选具有相似特征的元素

注意：

每一对属性需要使用；隔开，最后一对属性后可以不加；

选择器：

分类：

1、基本选择器

1、id选择器：选择器具体的id属性值的元素，建议在一个html页面中id值唯一

语法：#id属性值{}

2、元素选择器：选择具有相同标签名称的元素

语法：标签名称{}

注意：id选择器优先级高于元素选择器

3、类选择器：选择具有相同的class属性值的元素

语法：.class属性值P{}

注意：类选择器优先级高于元素选择器

选择器优先级:id>class>标签>属性>所有

2、扩展选择器

1、选择所有元素：

语法：*{}

2、并集选择器：

语法：选择器1，选择器2{}

3、子选择器：筛选选择器1下的选择器2元素

语法：选择器1 选择器2{}

4、父选择器：筛选选择器2的父元素选择器1

语法：选择器1>选择器2{}

5、属性选择器：选择元素名称，属性名=属性值的元素

语法：元素名称[属性名=“属性值”]{}

6、伪类选择器：选择一些元素具有的状态

语法：元素:状态{}

如：<a>

状态：

link：初始化的状态

visited：被访问过的状态

active：正在被访问的状态

hover：鼠标悬浮状态

属性：

1、字体、文本

font-size：字体大小

color：文本颜色

text-align：对其方式

line-height：行高

color:greenyellow;/*字色*/
font: italic bold 12px/30px Georgia, serif;/*斜 粗 大 高 字体*/
font-size: 28px;/*字号*/
font-family: 楷体;/*字型*/
font-weight: bold;/*加粗*/
font-style: italic;/*斜体*/
text-decoration: underline;/*下划线*/
text-decoration: none;/*去掉线*/
text-decoration: line-through;/*删除线*/
text-decoration: overline;/*上划线*/
text-indent: 2em;/*首行缩进2个字*/
line-height: 30px;/*行高*/
letter-spacing: 5px;/*字间距*/
text-align: left;/*文字内容水平对齐方式*/
text-transform: uppercase;/*转换英文大小写或驼峰*/
/*以右 和 以下 为 正*/
text-shadow:-12px -22px #ff0000;/*文字阴影 水平 垂直 颜色*/
font-variant:small-caps;/*小型大写字母*/

2、背景

body { background: #00ff00 url(‘smiley.gif’) no-repeat fixed center; }

background：颜色图片地址不重复固定中心；

background-color:red;
background-image:url("./img/1.jpg");
background-repeat:no-repeat;/*默认 平铺，不平铺，x轴平铺，y轴平铺*/
background-size: cover;/* 背景图片呈现的样式，覆盖cover,  内容contain*/
background-attachment:fixed;/*背景动不动？ 滚动scroll  固定fixed */

3、边框

border：设置边框，复合属性：像素线型颜色

solid 实线，double 双线，dotted点线，dashed 虚线

4、尺寸

width：宽度

height：高度

5、盒子模型：控制布局

margin：外边距

padding：内边距

注意：默认情况下内边距会影响整个盒子的大小

box-sizing：border-box；设置盒子的属性，让width和height就是最终盒子的大小

float：浮动

left：左浮动

right：右浮动

border:1px solid red;/*边框*/
border-left-style: double;/*左边样式*/
border-width: 10px;/*宽*/
border-top:5px dotted yellow;/*solid 实线，double 双线，dotted点线*/
border-right-style: dashed;/*dashed 虚线*/
background-color: blue;
margin-top:30px;
margin:30px 0px 0px 50px;/*外边距 上右下左，顺时针，没有找对边*/
padding-left:50px;/*内填充*/
box-sizing: border-box;/*盒子的大小： 默认 content-box 内容大小，border-box 边框大小*/
width: 100px;
height: 100px;
border:none;/*取消边框*/
border-top-left-radius: 100px;/*四分之圆*/
/* border-top-right-radius: 50px;
border-top-left-radius: 50px;*/
/*border-radius: 0px 50px 50px 0px;*/
border-radius: 100px;
box-shadow: 30px 20px 50px gold;/*阴影*/
display: inline-block;/*行内*/
list-style:none;
position: static;/*默认静态定位*!*/
position: relative;/*相对定位:参照原位置*/
position: absolute;/*绝对定位*!*/