CSS要点整理

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

脑袋不灵光的小白羊

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

阅读量237

点赞数

分类专栏： HTML+CSS+JS 文章标签： css

本文链接：https://blog.csdn.net/qq_42588990/article/details/107574155

版权

HTML+CSS+JS 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

什么是CSS?

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

CSS与HTML之间的关系

1、HTML用于构建网页的结构
2、CSS用于构建HTML元素的样式
3、HTML是页面的内容组成，CSS是页面的表现
结构层 HTML
表示层 CSS
行为层 JavaScript

使用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：属性值3;…}
3.类选择器
.className{ } 如：.box{ color:red; }
类名不能以数字开头
一个页面中class名字可以重复

类选择器格式：
. 类名{
属性1：属性值1;
属性2：属性值2;
…
}
类名不能以数字开头
注意：一个页面中class名字可以重复
4.ID选择器
#idName{ } 如：#box{color:red;}
一个页面中id相同的id名只能出现一次

ID选择器格式：
#ID属性名{
属性1：属性值1;
属性2：属性值2;
…
}
注意：一个页面中id相同的id名只能出现一次
一般重复使用的样式不使用ID选择器，因为ID属性是唯一的

css选择器命名规范：
1.建议使用字符[a-zA-Z0-9]，连接符(-),下划线(_)。不建议使用中文
2.不能以数字开头

优先级：ID选择器>类选择器>标签选择器

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

合并选择器(并集选择器) 格式：
选择器1, 选择器2,…{
属性1：属性值1；
属性2：属性值2；
…
}
作用：提取共同的样式，减少重复代码

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

div+css布局

内容和显示分离，便于维护扩展，网页布局方便，当需求改变的时候，效果最明显

div：
1.可定义文档中的分区或节
2.可以把文档分割为独立的、不同的部分。
3.是一个块级元素。这意味着它的内容自动地开始一个新行
4.通常与css进行配合，会有更加强的表现形式

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

一般页面可简单的分为上中下结构，上为头部，中为内容部分，下为脚部。例如：
在这里插入图片描述
它的HTML结构如下：

<body>
	<div class="header"></div>
	<div class="content"></div>	
	<div class="footer"></div>
</body>

此时为了有更强的表现力，我们可以加入一点CSS样式，代码如下：
样式部分：

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

*选择一个元素的时候可以直接通过标签，也可以给标签起个class名。

CSS布局练习：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            border-style: solid;
            border-width:9px;
            border-color:#83c44e;
        }
        #top1 {
            height:80px;
            background:greenyellow;

        }
        #top2 {
            height:80px;
            background:greenyellow;

        }
        #left {
            float:left;
            height:400px;
            width:400px;
            background:cornflowerblue;

        }
        #right {

            height:400px;
            background:#2196f3;
        }
        #bottom{
            height:80px;
            background:greenyellow;
        }
    </style>
</head>
<body>
    <div id="top1"></div>
    <div id="top2"></div>
    <div id="left"></div>
    <div id="right"></div>
    <div id="bottom"></div>
</body>
</html>

在这里插入图片描述

脑袋不灵光的小白羊

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS要点整理

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

扫一扫

专栏目录