CSS

最新推荐文章于 2021-08-04 03:39:28 发布

一大三千@大千世界

最新推荐文章于 2021-08-04 03:39:28 发布

阅读量177

点赞数

本文链接：https://blog.csdn.net/weixin_45192252/article/details/100545779

版权

CSS：页面美化和布局控制

1.概念：Cascading Style Sheets 层叠样式表
------ 层叠：多个样式可以作用在同一个html的元素上，同时生效
2.好处：
----- 1.功能强大
----- 2. 将内容展示和样式控制分离
------------ 降低耦合度。解耦
------------- 让分工协作更容易
------------- 提高开发效率

3.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>中国</div>
</body>
</html>

----- 3.外部样式
--------外部样式
1.定义css的资源文件
2.在head标签内，定义link标签，引入外部资源的文件

a.css文件：

div{
    color: green;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/a.css">
</head>
<body>
<!--外部样式
     1.定义css的资源文件
     2.在head标签内，定义link标签，引入外部资源的文件
 -->
<div>内蒙古</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    <link rel="stylesheet" href="css/a.css">-->
    <style>
        @import "css/a.css";
    </style>
</head>
<body>
<!--外部样式
     1.定义css的资源文件
     2.在head标签内，定义link标签，引入外部资源的文件
 -->
<div>内蒙古</div>
</body>
</html>

4.CSS语法：
----- 格式：
----------- 选择器：{
----------- 属性名1：属性值1；
----------- 属性名2：属性值2；
}
选择器：筛选具有相似特性的元素
注意：
------- 每一对属性需要使用；隔开，最后一对属性值可以不加

5.选择器：筛选具有相似特性的元素
----------------- 1.id选择器：选择器具体的id属性值得元素，建议在一个html 页面中id值唯一
语法： #id属性值{}
----------------- 2.元素选择器：选择具有相同标签名称的元素
语法：标签名称{}
注意：id选择器要高于元素选择器
----------------- 3.类选择器：选择具有相同class属性值的元素
语法： .class属性值{}
注意：类选择器优先级高于元素选择器
---------- 2.扩展选择器
----------------- 1.选择所有元素：
------------------------ 语法：{ }
----------------- 2.并集选择器：
------------------------- 选择器1，选择器2{ }
----------------- 3.子选择器：筛选选择器1元素下的选择器2元素
-------------------------- 语法：选择器1 选择器2{ }
----------------- 4.父选择器：筛选选择器2的父元素选择器1
--------------------------- 语法：选择器1>选择器2{ }
----------------- 5属性选择器：选择元素名称，属性名=属性值的元素
----------------------- 语法：元素名称【属性名=" "】{ }
------------------------------- 用于选择input元素
----------------- 6.伪类选择器：选择一些元素具有的状态
---------------- 语法：元素：状态{ }
如：< a>
------- 状态：
------------- link：初始化的状态
------------- visited：被访问过得状态
------------- active：正在访问状态
------------- hover：鼠标悬浮状态
6.属性
---- 1.字体、文本
----------- font-size：字体大小
----------- color：文本颜色
----------- text-align：对其方式
----------- line-height：行高
---- 2.背景
----------- backgroud：
---- 3.边框
----------- border：设置边框；符合属性
---- 4.尺寸
----------- width：宽度
----------- height：高度
---- 5.盒子模型
----------- margin：外边距
----------- padding：内边距
------------------------ 默认情况下内边距会影响整个盒子的大小
----------- box-sizing：border-box：设置盒子的属性，让width和height就是最终盒子的大小

一大三千@大千世界

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS

CSS：页面美化和布局控制1.概念：Cascading Style Sheets 层叠样式表------ 层叠：多个样式可以作用在同一个html的元素上，同时生效2.好处：----- 1.功能强大----- 2. 将内容展示和样式控制分离------------ 降低耦合度。解耦------------- 让分工协作更容易------------- 提高开发效率3.CSS...
复制链接

扫一扫