CSS基础知识小结

最新推荐文章于 2022-04-29 10:45:43 发布
最新推荐文章于 2022-04-29 10:45:43 发布
阅读量613 收藏
点赞数
分类专栏： CSS Web前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jianlong192/article/details/8273837
版权

CSS，全称Cascading Style Sheets，中文翻译为“层叠样式表”。

一、样式表的引入

  1. 嵌入式：在<head></head>标签内
    <style type="text/css">
    CSS样式规则
</style>
  2. 链接式：在<head></head>标签内
    <link href="main.css" rel="Stylesheet">
  3. 引入式：在<head></head>标签内
    <style type="text/css">
          @import url(main.css);
</style>

二、CSS样式规则

  1. 类别选择符

    p.bold { font-weight:bold; }
    <p class="bold">这个段落是粗体</p>

  2. ID选择符

    p#bold { font-weight:bold; }
    <p id="bold">这个段落是粗体</p>

  3. 群选择符

    可以同时为多个选择符应用同一套规则，每个选择符之间用逗号隔开。
    p, h1, h2{
    text-align: left;
}

    还可以在群选择符中掺杂ID选择符或类别选择符

    p.navigation, h1#title{
    font-weight: bold;
}

  4. Color属性

    p { color: red; }
    5种定义颜色的方法
    PropertyValueDescription
    color:<color keyword>设置颜色为给定的值，如red
    color:#rrggbb用HTML的16进制表示，如#FF00BB
    color:rgb(rrr,ggg,bbb)通过RGB三种颜色的数值(0到255)，如rgb(100,200,255)
    color:rgb(rrr%,ggg%,bbb%)通过RGB三种颜色的百分比指定，如rgb(0%,100%,0% )
    color:inherit继承父值

  5. 背景颜色属性

    p { background-color: red; }
    5种定义背景颜色的方法
    PropertyValueDescription
    background-color:<color keyword>设置颜色为给定的值，如red
    background-color:#rrggbb用HTML的16进制表示，如#FF00BB
    background-color:rgb(rrr,ggg,bbb)通过RGB三种颜色的数值(0到255)，如rgb(100,200,255)
    background-color:rgb(rrr%,ggg%,bbb%)通过RGB三种颜色的百分比指定，如rgb(0%,100%,0% )
    background-color:inherit继承父值

  6. 布局



  7. 边框

    (1) 边框宽度

    可以用关键字来指定边框宽度

    可以用具体的数值来指定


    边框宽度规则
    PropertyValueNotes
    border-width:thin 
    border-width:medium默认边框宽度
    border-width:thick 
    border-width:<length>用具体数值来指定
    border-top-width:<length>设置上边框
    border-right-width:<length>设置右边框
    border-bottom-width:<length>设置下边框
    border-left-width:<length>设置左边框

    (2) 边框颜色



    边框颜色规则
    PropertyValue TypeExampleResult
    border-color:color namered关键字设定边框颜色
    border-color:hex value#FFFFFF指定边框颜色
    border-color:rgb() valuergb(10%, 80%, 0)指定边框颜色

    (3) 边框风格



  8. 边界距

    边界距属性是用来指定两个元素边框之间的距离


    边界距规则
    PropertyValueNotes
    margin-top:<length>设置上边界距
    margin-right:<length>设置右边界距
    margin-bottom:<length>设置下边界距
    margin-left:<length>设置左边界距
    margin:<top> <right> <bottom> <left>设置每个边界距

  9. 填充属性

    填充属性用来控制元素边框内空间的大小


    填充属性规则
    PropertyValueNotes
    padding-top:<length>设置上填充
    padding-right:<length>设置右填充
    padding-bottom:<length>设置下填充
    padding-left:<length>设置左填充
    padding:<top> <right> <bottom> <left>设置每个填充

  10. 背景图片

    在CSS中，可以对任何元素指定背景图片
    body { 
    background-image: url("...");
}
    Property
    		ValueNotes
    background-image:url("<location>")通过网址来指定背景图片
    background-image:none无背景图片
    background-image:inherit继承父值

  11. 背景重复

    通过 background-repeat 属性来指定背景的重复方式

    背景重复规则
    PropertyValueNotes
    background-repeat:repeat重复背景
    background-repeat:repeat-x仅平行重复
    background-repeat:repeat-y仅垂直重复
    background-repeat:no-repeat不重复
    background-repeat:inherit继承父值

  12. 背景附着

    通过 background-attachment 属性控制背景是否随网页滚动

    背景附着规则
    PropertyValueNotes
    background-attachment:scroll背景随着滚动
    background-attachment:fixed背景固定
    background-attachment:inherit继承父值

  13. 背景定位

    此属性用来指定背景图片在网页的展示位置

    背景定位规则
    PropertyValueNotes
    background-position:<x> <y>用具体数值或百分比指定
    background-position:[top \ center \ botton]
    [left \ center \ right]    		用关键字定位

  14. 字体属性

    p { font-family: Verdana }

    字体规则
    PropertyValue
    font-family:Verdana
    font-family:Times
    font-family:Georgia
    font-family:Arial, Verdana, sans-serif
    font-family:Times New Roman, serif
    font-family:I Don't Have This Font, sans-serif
    说明：当 font-family 的属性值为多个值时，浏览器会先去找第一种字体，若没有第一种字体，则找第二种字体，以此类推。

  15. 字体风格属性

    此属性用来控制字体是否斜体
    p { font-style: italic; }

    PropertyValueNotes
    font-style:oblique斜体
    font-style:italic斜体
    font-style:normal正常

  16. 字体的粗细属性

    此属性用来设置字体的粗细程度
    p { font-weight: bold; }

    PropertyValue
    font-weight:normal
    font-weight:bold
    font-weight:bolder
    font-weight:lighter
    font-weight:<100 - 900>

  17. 字体大小属性

    设置字体的大小（绝对和相对）
    p { font-size: 12pt; }

    PropertyValueUnit Type
    font-size:12ptAbsolute
    font-size:12pxAbsolute
    font-size:mediumAbsolute
    font-size:smallerRelative
    font-size:normalRelative
    font-size:largerRelative
    font-size:50%Relative

  18. 行间距属性

    此属性用来指定行与行之间的垂直间距。
    p { line-height: 14pt; }

  19. 字体变量属性

    font-variant 用来控制小写变大写

    PropertyValue
    font-variant:normal
    font-variant:small-caps

     设置 font-variant:small-caps 属性后变为

  20. 文本缩进

    通过此属性可以在CSS中对每个段落的首行缩进。

    PropertyValueDescription
    text-indent:<length>根据具体数值对段落首行进行缩进
    text-indent:<percentage>根据百分比缩进

  21. 文本对齐属性

    CSS支持水平的对齐和适当的文本。

    PropertyValueDescription
    text-align:left文本左对齐
    text-align:right文本右对齐
    text-align:center文本居中对齐
    text-align:justify文本两端对齐

  22. 文本装饰

    在CSS中，文本装饰效果涉及到上划线，下划线，删除线等对文本的一些装饰效果。

    PropertyValueExample
    text-decoration:none
    text-decoration:underline
    text-decoration:overline
    text-decoration:line-through

  23. 文本变形

    文本变形是指大小写转换首字母大写等属性。

    PropertyValueDescription
    text-transform:none不变
    text-transform:capitalize首字母大写
    text-transform:uppercase全部变大写
    text-transform:lowercase全部变小写

  24. 链接与化类别

    用CSS的 :link 化类别用来指定没有访问过链接的属性。

    Pseudo-ClassExample UseDescription
    :linka:link { ... }设置未访问链接属性
    :visiteda:visited { ... }设置访问过链接属性
    :activea:active { ... }鼠标点击与释放之间时
    :hovera:hover { ... }鼠标悬停时



    整理来源：http://www.caopeng.org/css/
jianlong192
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS基础知识点
遇见你 的博客
12-20 449
第五章：网页的样式 link/lɪŋk/style/staɪl/ attribute /əˈtrɪbjuːt/class/klɑːs/ attribute/əˈtrɪbjuːt/hover/ˈhɒvə(r)/ active/ˈæktɪv/focus /ˈfəʊkəs/ visited /'vɪzɪtɪd/before /bɪˈfɔː(r)/ after/ˈɑːftə(r)/ CSS简介 CSS全称为...
CSS的基础知识点
m0_59030524的博客
11-14 409
1.CSS简介 1.1 CSS-网页美容师 CSS 是 层叠样式表（Cascading Style Sheets）的简称。 CSS 也是一种标记语言。 CSS 主要用于设置 HTML 页面中的文本内容（字体、大小、对齐方式）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。· HTML 呈现结构，CSS 决定样式，结构与样式分离。 2.CSS基础选择器 选择器分类 选择器分为基础选择器和复合选择器两大类。 基础选择器由单个选择器组成 基础选择器包括：标签选择器.
Html文本的解析库BeautifulSoup
Ivan_ken的博客
09-21 624
前言 python爬虫系列文章的第3篇介绍了网络请求库神器 Requests ，请求把数据返回来之后就要提取目标数据，不同的网站返回的内容通常有多种不同的格式，一种是 json 格式，这类数据对开发者来说最友好。另一种 XML 格式的，还有一种最常见格式的是 HTML 文档，今天就来讲讲如何从 HTML 中提取出感兴趣的数据 自己写个 HTML 解析器来解析吗？还是用正则表达式？这
CSS基础知识总结
Lotus_fragrance的博客
04-29 3267
一、基础认识 css的中文又叫做：层叠样式表。 语法：选择器 + {属性名： 属性值}、 css引入方式：1.内嵌式，写在style标签中。通常放在head中。2.行内式：写在style标签中，写在标签中。3.外联式：单独写一个css文件，通过link把该文件引入。 二、选择器 选择器 在html中写法 在css中写法 标签选择器 就是标签本身 div{ } 类选择器 class= "banner" .banner { }.
css基础知识总结
zouk‘s blogs
07-19 454
一：对css的理解 what：cascading style sheet，是给html化妆的，是让html如何更加丰富的显示自己。 how ：使用样式表有三种方式： 内联样式 内部样式 外部样式（*）—–<link rel="stylesheet" href=".css文件路径"> why ：给人一种更好的视觉体现，
css 基础知识总结以及demo
04-09
标签引用CSS文件 在实际的项目开发过程中，我们一般都是将CSS单独存放在一个文件夹中，然后在HTML页面中通过如下形式进行引用。 样式表路径+名称.css"> 引用后CSS文件仍然是独立的，不会受到包括HTML和JavaScript...
css基础知识总结-学习
12-02
css基础知识总结-学习
html+css基础知识总结
06-07
能快速准确的看出html+css基础标签和样式的作用
CSS基础知识总结-新手入门篇
08-03
**CSS基础知识总结** **1. CSS概述** CSS（Cascading Style Sheets）是层叠样式表，主要用于美化HTML页面。它允许我们独立于内容来定义网页的布局和样式，使得网页设计更加灵活和可控。CSS可以控制网页元素的颜色、...
CSS基础知识.docx
07-23
CSS 基础知识总结 一、CSS 盒子模型 CSS 盒子模型是指浏览器对 HTML 元素进行渲染和布局的方式。主要有两种盒子模型，即 W3C 盒子模型和 IE 盒子模型。 1. W3C 盒子模型（标准盒子模型）：盒子实际内容（content...
100款古风PPT (80).pptx
最新发布
07-13
【ppt素材】工作总结、商业计划书、述职报告、读书分享、家长会、主题班会、端午节、期末、夏至、中国风、卡通、小清新、岗位竞聘、公司介绍、读书分享、安全教育、文明礼仪、儿童故事、绘本、防溺水、夏季安全、科技风、商务、炫酷、企业培训、自我介绍、产品介绍、师德师风、班主任培训、神话故事、巴黎奥运会、世界献血者日、防范非法集资、3D快闪、毛玻璃、人工智能等等各种样式的ppt素材风格。 设计模板、图片素材、PPT模板、视频素材、办公文档、小报模板、表格模板、音效配乐、字体库。 广告设计：海报，易拉宝，展板，宣传单，宣传栏，画册，邀请函，优惠券，贺卡，文化墙，标语，制度，名片，舞台背景，广告牌，证书，明信片，菜单，折页，封面，节目单，门头，美陈，拱门，展架等。 电商设计：主图，直通车，详情页，PC端首页，移动端首页，钻展，优惠券，促销标签，店招，店铺公告等。 图片素材：PNG素材，背景素材，矢量素材，插画，元素，艺术字，UI设计等。 视频素材：AE模板，会声会影，PR模板，视频背景，实拍短片，音效配乐。 办公文档：工作汇报，毕业答辩，企业介绍，总结计划，教学课件，求职简历等PPT/WORD模板。
多旋翼飞行器设计与控制理论 -第15讲_展望V2.pdf
07-13
多旋翼飞行器设计与控制理论 -第15讲_展望V2.pdf
光伏项目设备资产配置方式论证报告.doc
07-13
光伏项目设备资产配置方式论证报告.doc
1720843046670.png
07-13
1720843046670.png
CJ60Lib.dll
07-13
.................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................
黑金商务工作汇报总结PPT模板
07-13
【作品名称】：黑金商务工作汇报总结PPT模板 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。
项目办公生活设备台账.docx
07-13
项目办公生活设备台账.docx
红色商务风2024一起向未来年终总结PPT模板
07-13
【作品名称】：红色商务风2024一起向未来年终总结PPT模板 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。
工程项目管理目标责任书.docx
07-13
工程项目管理目标责任书.docx
前端HTML5 css基础
03-09
可以更好的实现网页的布局内容方向不明确时，应根据设计稿来确定合适的版式结构多多学习开源项目，获取更多的灵感和技巧，提升开发水平总结：HTML5 和 CSS 是前端开发的基础，掌握好这两门基础知识是成为一名优秀...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值