CSS学习总结

最新推荐文章于 2024-09-23 11:30:52 发布
最新推荐文章于 2024-09-23 11:30:52 发布
阅读量409 收藏
点赞数 1
分类专栏： CSS 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46150940/article/details/107936282
版权

一、CSS简介

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

二、CSS语法

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:
在这里插入图片描述
选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

实例：
CSS声明总是以分号(;)结束，声明总以大括号({})括起来:

p {color:red;text-align:center;}

为了让CSS可读性更强，你可以每行只描述一个属性:

p
{
    color:red;
    text-align:center;
}

三、注释

注释是用来解释你的代码并且可以随意编辑它，但是浏览器会忽略它。

CSS注释以 /* 开始, 以 */ 结束，如下：

/* 这是一个注释 */
p {
    /* 这是一个注释 */
    color: red;
    text-align: center;
}

四、CSS 引入方式

应用CSS样式有3种方式 ：
内联样式、嵌入式样式表和外部样式表

(1)内联样式

直接在标签里面定义style的属性。
这样的标签很长，不利于维护

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <!--引入内联样式-->
    <p style="color: red;text-align: center">外部样式</p>
</body>
</html>

(2)嵌入式样式表

将CSS代码集中写在HTML文档的<head>头部标记中，并用<style>标记定义

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <!--引入内部样式表-->
        <style type="text/css">
	        选择器 { 属性1:属性值1; 
	                属性2:属性值2; 
	                属性3:属性值3;
	        }
          </style>
    </style>
</head>
<body>
    <p>外部样式</p>
</body>
</html>

注：

<style>标记一般位于<head>标记中的<title>标记之后，因为浏览器是从上到下解析代码的，把CSS代码放在头部便于提前被加载和解析，以避免网页内容加载后没有样式修饰带来的问题。

(3)外部样式表

将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过标记将外部样式表文件链接到HTML文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <!--引入外部样式表-->
    <link href="main.css"  type="text/css"  rel="stylesheet" />
</head>
<body>
    <p>外部样式</p>
</body>
</html>

href定义所链接外部样式表文件的地址，可以是相对路径，也可以是绝对路径。
type定义所链接文档的类型，这里需要指定为“text/css”，表示链接的外部文件为CSS。
rel定义当前文档与被链接文档之间的关系，这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。

main.css文件

p {
    color: red;
    text-align: center;
}

五、CSS背景属性

值描述
background简写属性，作用是将背景属性设置在一个声明中。
background-color设置元素的背景颜色。
background-image把图像设置为背景。
background-position设置背景图像的起始位置。
background-repeat设置背景图像是否及如何重复。
background-attachment背景图像是否固定或者随着页面的其余部分滚动。

background-color

background-color 属性定义了元素的背景颜色，页面的背景颜色使用在body的选择器中。

常用颜色代码：

1、常用颜色单词，比如green（绿色），yellow（黄色），red（红色），transparent（透明色）等；

2、以#号开头的六个字符组成的颜色代码，比如：#FF0000（红色），#000000（黑色），#F9F900（黄色）等；
在这里插入图片描述
3、颜色rgb值，表达方式：rgb(参数1，参数2，参数3)，如：“rgb(255,0,0)”，三个参数分别表示r，g，b

R：红色值。正整数 | 百分数
G：绿色值。正整数 | 百分数
B：蓝色值。正整数 | 百分数
在这里插入图片描述
如：

<!DOCTYPE html>
<html>
<head>
<style>
h1{
    background-color:#6495ed;
}
p{
    background-color:#e0ffff;
}
div{
    background-color:#ffff00;
}
</style>
</head>
<body>
<h1>Test</h1>
<div>
div 
<p>color</p>
div 
</div>
</body>
</html>

效果：
在这里插入图片描述

background-image

background-image 属性描述了元素的背景图像。默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体。

属性的值

值描述
url(‘URL’)图像的URL
none无图像背景会显示。这是默认
linear-gradient()创建一个线性渐变的 “图像”(从上到下)
radial-gradient()用径向渐变创建 “图像”。 (center to edges)
repeating-linear-gradient()创建重复的线性渐变 “图像”
repeating-radial-gradient()创建重复的径向渐变 “图像”
inherit指定背景图像应该从父元素继承

例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>test</title> 
<style>
body 
{
	background-image:url('paper.gif');
	background-color:#cccccc;
}
</style>
</head>

<body>
<h1>Hello World!</h1>
</body>

</html>

效果：
在这里插入图片描述

background-position

background-position 属性设置背景图像的起始位置。这个属性设置背景原图像的位置，背景图像如果要重复，将从这一点开始。

属性值

值描述
在这里插入图片描述如果仅规定了一个关键词，那么第二个值将是"center"。默认值：0% 0%。
x% y%第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果仅规定了一个值，另一个值将是 50%。
xpos ypos第一个值是水平位置，第二个值是垂直位置。左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。如果仅规定了一个值，另一个值将是50%。可以混合使用 % 和 position 值。

如：

body
{ 
  background-image:url('/1.gif');
  background-repeat:no-repeat;
  background-attachment:fixed;
  background-position:center;
}

效果:
在这里插入图片描述

六、CSS选择器

1.标签选择器

每一种标签的名称都可以作为相应标签选择器的名称

<style type="text/css">
    p{
        color: #f40;
        font-size: 25px;
    }
</style>
<body>
    <div>
        <p>这是标签选择器</p>
    </div>
</body>

2.类选择器

通过类名进行选择

<style type="text/css">
    .p1{
        color: #00ff00;
    }
    .p2{
        color: #0000ff;
    }
</style>
<body>
    <p class="p1">这是类选择器</p>
    <p class="p2">hello world</p>
</body>

3.ID选择器

每个标签都可以使用ID属性来唯一标识当前标签，通过ID进行选择

<style type="text/css">
    #text{
        color: red;
    }
</style>
<body>
    <p id="text">这是id选择器</p>
</body>

4.通用选择器

选择所有标签以设置相同样式

<style type="text/css">
    *{
        color: red;
    }
</style>
<body>
    <p>这是通用选择器</p>
    <p>hello</p>
    <p>world</p>
</body>

5.派生选择器

态生选择器又称为包含选择器或后代选择器，该选择器作用于某个元素中的任意后代元素。

<style type="text/css">
    div ul li{
        color: red;
        list-style: none;
    }
</style>
<body>
    <div>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </div>
</body>

6.分组选择器

可一次选择多个标签以设置相同样式，当多个选择器拥有相同的约束条件时，可以用逗号对他们进行分组。

<style type="text/css">
    p,a,li{
        color: blue;
    }
</style>
<body>
<p>这是分组选择器</p>
<p>hello</p>
<a href="#">world</a>
    <div>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </div>
</body>

7.属性选择器

通过属性（如name属性）进行选择以设置相同的样式

<style type="text/css">
    [name="pra1"]{
        color: blue;
    }
    [name="pra2"]{
        color: red;
    }
</style>
<body>
    <p name="pra1">这是属性选择器</p>
    <p name="pra2">hello world</p>
</body>

8.兄弟选择器

选择兄弟关系的标签设置样式

<style type="text/css">
    p+a{
        color: green;
    }
</style>
<body>
        <p>这是兄弟选择器</p>
        <a>hello world</a>
</body>

9.后续兄弟选择器

后续兄弟选择器选取所有指定元素之后的相邻兄弟元素。定义的时候用 ~ 隔开。

<style type="text/css">
    div ~ p {
    background-color: red;
    }
</style>
<body>
   <div>
    <p>DIV 内部段落。</p>
</div>
<p>DIV 之后的第一个 P 元素。</p>
<p>DIV 之后的第二个 P 元素。</p>

</body>

10.直接父子选择器

选择父子关系的标签中子标签设置样式

<style type="text/css">
    div>p {
        color: red;
    }
</style>
<body>
    <div>
        <p>这是直接父子选择器</p>
    </div>
</body>

基本选择器实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*标签选择器 所有span标签的颜色都是红色*/
        span {color: orange}
        /*ID 选择器*/
        #s1 {font-size :36px}
        /*类选择器*/
        .c1 {color: blue}
        /* 通用选择器*/
        * {color : deeppink}
    </style>
 
</head>
<body>
<span id ="s1">span</span>
<div class="c1">div
    <p>p
        <span>span</span>
    </p>
</div>
<div class ="c1">div</div>
</body>
</html>

组合选择器实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*后代选择器*/
        div span{color:blue}
        /*儿子选择器*/
        div>span {color:red}
        /*兄弟选择器*/
        div+span {color:blue}
        /*后续兄弟选择器*/
        div~span {color:deeppink}
    </style>
</head>
<body>
<span>我是div上面的span</span>
<div>
    <span>我是div里面的第一个span</span>
    <p>我是div里面的第一个p
        <span>我是div里面第一个p里面的第一个span</span>
    </p>
    <span>我是div里面的第二个span</span>
</div>
Atkxor
关注
专栏目录
HTML总结&CSS学习总结
m0_65791148的博客
06-21 1618
HTML总结&CSS学习总结
CSS —— background 背景
藜笙的博客
02-28 848
<!--背景：背景支持为元素添加背景颜色和背景图片，接下里介绍背景相关的属性。 ①background-color:背景颜色。 CSS代码 ： <style> #box{ width:200px; height: 200px; background-color:red; } ...
Color 颜色代码大全
m0_70903072的博客
06-15 3638
十六进制颜色编码字符串如下所示（前置的英语单词都是颜色）
CSS 之 background 系列属性详解
weixin_45092437的博客
03-09 3万+
背景系列属性，共包含9种属性：background-color：设置元素的背景颜色。background-image：设置元素的背景图片。background-size：设置元素背景图片的大小。background-position：设置元素背景图片的位置。background-repeat：设置背景图片是否重复，以及如何重复。background-clip：设置元素背景的渲染区域。background-origin：设置元素背景的定位区域。background-attachment：设置元素的背景图片是否
十六进制颜色码
星之所望的博客
05-19 1万+
英文代码 形像颜色 HEX格式 RGB格式 LightPink 浅粉色 #FFB6C1 255,182,193 Pink 粉红 #FFC0CB 255,192,203 Crimson ...
background-size属性详解
热门推荐
少油少盐不要辣
06-05 11万+
css background-size 属性详解，background-size 指定背景图像大小，以象素或百分比显示，当指定为百分比时，大小会由所在区域的宽度、高度以及 background-origin（图片的起始位置） 的位置决定，还可以通过 cover 和 contain 来对图片进行伸缩。 background-size 属性 1、定义： background-size 用来调整背景图像...
十六进制颜色值对照表
andyguan01_2的博客
01-24 2万+
用MarkDown写博客，有时会用到字体颜色，在网上找了一份十六进制颜色对照表： 颜色名十六进制颜色值颜色Red#FF0000rgb(255, 0, 0)Yellow#FFFF00rgb(255, 255, 0)Blue#0000FFrgb(0, 0, 255)Green#008000rgb(0, 128, 0)Orange#FFA500rgb(255, 165, 0)Indigo#4B0082r...
HTML简介
c_lanxiaofang的博客
09-13 257
9北212 乔波老师 9月13日 第一周 周一 一大 上课内容： 简单介绍课程设计安排、打分规则 第一章 网页开发基础 1.1 HTML简介 1.1.1 HTML简介 HTML Hyper Markup Language 超文本标记语言 主要作用：通过HTML标记对网页中的文本、图片、声音等内容进行描述 HTML网页文件格式：.html .htm <!DOCTYPE>文档类型声明 位于文档第一行，用于向浏览器说明当前文档使用的HTML标准规范种类。 该标记和浏...
【CSS】background-size 属性详解
最新发布
lph159的博客
09-23 1789
属性允许你定义背景图片的大小，以适应元素的尺寸和页面布局。该属性能够通过多种方式设定背景图像的缩放比例，提供了从完全覆盖到按比例缩放的多种方案。auto：默认值，保持背景图片的原始大小。cover：背景图片将被缩放到足够大，以完全覆盖元素的背景区域，即使图片会被裁剪。contain：背景图片将被缩放到足够小，以完整显示在元素背景中，且不会被裁剪。指定尺寸：你可以直接设定背景图片的宽度和高度，如或50% 50%，甚至还支持calc()函数进行动态计算。属性为开发者提供了强大的背景图像控制能力。
css3 background-size属性--ie兼容
zerlinda_c的博客
11-24 5723
background-size 指定背景图像大小，以象素或百分比显示，当指定为百分比时，大小会由所在区域的宽度、高度以及 background-origin 的位置决定，还可以通过 cover 和 contain 来对图片background-size 属性1、定义：background-size 用来调整背景图像的尺寸大小。 2、语法：以下为引用内容： background-size :
细说css中的background属性以及一些问题
苏苏就是小苏苏的博客
08-30 7657
1.background的属性 属性 background-color 属性设置元素的背景颜色。 这种颜色会填充元素的内容、内边距和边框区域，扩展到元素边框的外边界（但不包括外边距）。如果边框有透明部分（如虚线边框），会透过这些透明部分显示出背景色。 transparent 值。尽管在大多数情况下，没有必要使用 transparent。不过如果您不希望某元素拥有背景色，同时又不希望用户对浏览器的颜色设置影响到您的设计，那么设置 transparent 值还是有必要的。 background-positi
CSS3 Background-size 详解
Ada Yan
03-21 3101
CSS3 Background-size 详解前段时间在做关于响应式的页面时，由于要兼容ie8，并且要保证图片等比缩放，且对图中内容的显示有要求，导致无法使用background-size等属性，最终放弃了使用background，用<img>来替代。这样增加了代码量而且看起来很不clean。但是很多情况下用background还是可以达到目的的，并且有解决方案（后面会提到）。下面我就详细讲下bac
css中background-size属性
z . s . j
09-24 1万+
background-size的值类型：1个或2个值，这些值既可以是像素px，也可以是百分比%或auto，还可以是特定值cover, contain。 　　background-size可以设置2个值，1个为必填，1个为可选。 　　其中第1个值用于指定背景图的width，第2个值用于指定背景图的height，如果只给background-size设置1个值，则第2个值默认为auto高度自动
关于background-size各个参数详解
JED'S BLOG
02-23 1万+
今天公司的要做一个名叫梦幻恋舞的webapp，在设置背景图的时候，明明已经把整个区域的高宽设置成100%了，但是背景图总不能全覆盖整个网页。考虑使用background-size这个属性，在用的时候发现background-size还有好多值，这边特地找一下学习一下。 属性名: background-size 属性值: * 其中 bg-size = [ |
background 的巧用
S_Chen
12-25 574
在网络时代的今天，我不得不感叹一下，浏览器的百花齐放，百家争鸣！！！！他们的竞争却给我们这些苦逼的程序员带了灾难。今天写程序时遇到一个关于Background的小问题。纠结了一下午。终于搞定了！具体如下： 用li做导航条，并且设置一个导航图片。我用的方法是，div+ul+li+background。具体代码如下： jsp：                             政策法规
CSS之background深度详解
kk_yanwu的博客
03-08 9342
background 是CSS中一个常用的属性，用来修改某个元素的背景； background 拥有8种属性，分别为： background-color background-position background-size background-repeat background-origin background-clip background-attachment background...
说说background-size:cover;与background-size:contain的区别
Allenyhy的博客
09-04 3万+
1.background-size:cover 官方background-size:cover;的解释是这个样子的，截图如下所示： 解释：1）是按照图片的比例放大或者缩小至充满容器，而不是按照容器的比例大小来缩放。             2）如果照片的比例和容器的比例是不一致的，必定会导致照片的不完整性。 下面举一个栗子来说明这种情况： 首先原始的背景图片是这样的。 而设置b...
CSS background 属性
ssisse的博客
05-29 995
CSS background 属性 定义和用法 background 简写属性在一个声明中设置所有的背景属性。 可以设置如下属性： background-colorbackground-positionbackground-sizebackground-repeatbackground-originbackground-clipbackground-attachment
CSS学习总结：掌握CSS样式规则和使用方式
CSS学习总结 CSS（Cascading Style Sheets），中文名为“层叠样式表”，是用于表现HTML或XML等文件式样的计算机语言。它可以对网页的布局、字体、颜色、背景和其他效果实现更加精确的控制。 1. CSS简介 CSS全称为...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Atkxor

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值