6月1日

最新推荐文章于 2022-01-19 11:37:59 发布

ymszbd49

最新推荐文章于 2022-01-19 11:37:59 发布

阅读量272

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/m0_46284870/article/details/106484041

版权

笔记专栏收录该内容

18 篇文章 0 订阅

订阅专栏

CSS（Cascading Style Sheets）

层叠样式表，又叫级联样式表，简称样式表（HTML承担页面结构，而CSS承担页面美化）
1.用于HTML文档中元素样式的定义
实现了将内容与表现分离
提高代码的可重用性和可维护性
2.文件后缀是.css

CSS与HTML之间的关系
1.HTML用于构建网页的结构
2.CSS用于构建HTML元素的样式
3.HTML是页面的内容组成，CSS是页面的表现

HTML CSS JavaScript
结构层 HTML
表示层 CSS
行为层 JavaScript

chrome调试工具打开快捷方式：f12 ctrl+shift+i

 chrome使用小技巧：
    ctrl+滚轮  可以放大开发调试工具代码大小
    左边式html元素结构，右边式css样式
    右边css样式可以改动数值和颜色来查看更改后的效果

使用CSS样式表的方式

1.内联方式
直接把CSS代码用style属性添加到开始标签中
<p style=“color:red;”>红色字体</p>
2.内部样式表
直接把CSS代码添加到头部的style标签中
<head>
<style>
p{color:red;}
</style>
</head>

3.外部样式表
<link rel=“stylesheet” href=""/>
StyleSheet的意思就是样式调用
4.导入式
<head>
<style>
@import url(my.css);
</style>
</head>

**优先级：行内样式>内部样式>外部样式>导入样式**

(即当行内样式和内部样式同时出现时，优先显示行内样式)

css加载方式link和@import的区别，为什么不推荐使用@import?

@import是CSS提供加载样式的一种方式，只能用于加载CSS。link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义rel连接属性等。
加载顺序的差别。当一个页面被加载的时候，link引用的CSS会同时被加载，@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候会比较明显。
兼容性的差别。@import在IE5以上才能识别，而link标签无此问题。
使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候，只能使用link标签，因为dom操作元素的样式时，用@import方式的样式也许还未加载完成。
5.使用@import方式会增加HTTP请求，会影响加载速度，所以谨慎使用该方法。

css语法

1.css是以属性/值对形式出现
2.属性和属性值之间用冒号（:）连接
3.多对属性之间用分号（;）隔开
如：color：red；

CSS样式表特征

1.继承性
指被包含在内部的标签可以拥有外部标签的样式，比如：text-、font-、line-*，但有些属性不能继承，比如：border、padding、margin
2.层叠性
可以定义多个样式
3.优先级
样式定义冲突时，按照不同样式规则的优先级来应用样式

css基础选择器

（通过选择器选择设置标签的属性）
1.通用选择器，全局选择器（*）
可以与任何元素匹配；常用于设置一些默认样式；优先级最低
通用选择器格式：
*{
属性1：属性值1;
属性2：属性值2;
…
}
注意：通用选择器的使用范围最广，但是它的优先级最低

2.元素选择器
HTML文档中的元素（标签）：p、b、div、a、img、body等
元素选择器格式：
标签{属性1：属性值1;属性2：属性值2;…}

<style>
        p {
         color: red;
        }
        /* div{
             color: plum;
         }*/
        *{
            color: #805abb;
            font-family: "宋体";
        }
    </style>

3.类选择器
.className{ } 如：.box{ color:red; }
注意：类名不能以数字开头；一个页面中class名字可以重复
类选择器格式：
.类名{
属性1：属性值1;
属性2：属性值2;
…
}

4.ID选择器
#idName{ } 如：#box{color:red;}
一个页面中id相同的id名只能出现一次，这一点与class不同
ID选择器格式：
#ID名{
属性1：属性值1;
属性2：属性值2;
…
}

<style>
       .libai{
           color: #f00;
       }
      /* p{
           color: green;
       }*/
       /* #dufu{
            color: #0f0;
        }*/
       #libai{
           color:orange;
       }
    </style>

css选择器命名规范：
1.建议使用字符[a-z,A-Z,0-9]，连接符(-),下划线(_)。不建议使用中文
2.不能以数字开头
优先级：ID选择器>类选择器>标签选择器

5.合并选择器
语法：选择器1,选择器2,…{ }
作用：提取共同的样式，减少重复代码
例如：.header,.footer{height:300px;}（此处.XXX是类名）

 <style>
        p,div,h1,.xiang,#buxiang{
            color: green;
        }
    </style>

css样式表优先级总结：

    1.相同的选择器，其样式表排序：行内样式>内部样式>外部样式(就近原则)
    2.相同方式的样式表，其选择器排序：ID选择器>类选择器>标签选择器（范围越小越优先）
    3.外部样式表的ID选择器>内部样式表的标签选择器

div+css布局

内容和显示分离，便于维护扩展，网页布局方便，当需求改变的时候，效果最明显
div：
1.可定义文档中的分区或节
2.可以把文档分割为独立的、不同的部分。
3.是一个块级元素。这意味着它的内容自动地开始一个新行
4.通常与css进行配合，会有更加强的表现形式

布局实例时需要用到的css属性
width:数值
height:数值
background-color:颜色
float:left 使div不占据一行

一般页面可简单分为上中下结构，上为头部，中为内容部分，下位脚部。例子：
1.html结构如下
<body>
<div class=“header”></div>
<div class=“content”></div>
<div class=“footer”></div>
</body>
*选择一个元素的时候可以直接通过标签，也可以给标签起个class名

2.样式部分
<style>
.header{ height: 100px; background-color: red; }
.content{ height: 400px; background-color: green; }
.footer{ height: 100px; background-color: yellow; }
</style>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>div+css布局</title>
    <style>
        .header{        height: 100px;        background-color: red;  }
        .content1{width:300px;float: left;        height: 400px;       background-color: green;   }
        .content2{width:1350px;    height: 400px;       background-color: blue;   }
        .footer{        height: 100px;        background-color: yellow;    }
    </style>
</head>
<body>
    <div class="header"></div>
    <div class="content1"></div>
    <div class="content2"></div>
    <div class="footer"></div>

</body>
</html>

ymszbd49

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
6月1日

CSS（Cascading Style Sheets）层叠样式表，又叫级联样式表，简称样式表（HTML承担页面结构，而CSS承担页面美化）1.用于HTML文档中元素样式的定义实现了将内容与表现分离提高代码的可重用性和可维护性2.文件后缀是.cssCSS与HTML之间的关系1.HTML用于构建网页的结构2.CSS用于构建HTML元素的样式3.HTML是页面的内容组成，CSS是页面的表现HTML CSS JavaScript结构层 HTML表示层 CSS行为层 JavaS
复制链接

扫一扫