第2天_CSS基础

最新推荐文章于 2024-11-09 23:47:15 发布
最新推荐文章于 2024-11-09 23:47:15 发布
阅读量113 收藏
点赞数
分类专栏： python_web前端笔记汇集 文章标签： html web python
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35689529/article/details/104866183
版权

第2天_CSS基础

  1. 学习目标
  • CSS简介和CSS语法
  • 引入CSS的三种方式及优先级
  • CSS选择器及选择器的权重
  • 浮动及清浮动
  • CSS核心属性
  • CSS盒子模型
  1. CSS简介和CSS语法

2.1 CSS 简介

CSS英文全名：Cascading Style Sheets层叠样式表, WEB标准中的表现标准语言, 表现标准语言在网页中主要对网页信息的显示进行控制，简单说就是如何修饰网页信息的显示样式。

目前推荐遵循的是W3C发布的CSS3.0

2.2 CSS语法

  • CSS语法：选择器 {属性：属性值；属性：属性值；}

  • 说明：

    • 每个CSS样式由两部分组成，即选择器和声明，声明又分为属性和属性值；
    • 属性必须放在花括号中，属性与属性值用冒号连接。
    • 每条声明用分号结束。
    • 当一个属性有多个属性值的时候，属性值与属性值不分先后顺序。
    • 在书写样式过程中，空格、换行等操作不影响属性显示。
  1. 引入CSS的三种方式及优先级

3.1 引入CSS的三种方式

  • 内部样式
    • 语法：
    • 说明：
      使用style标记创建样式时，最好将该标记写在;
  • 外部样式
    • 语法
    • 说明：
      使用link元素导入外部样式表时，需将该元素写在文档头部，即 中间。
      rel（relation）：用于定义文档关联，表示关联样式表；
      type：定义文档类型；
  • 内联样式 （或称：行间样式，行内样式，嵌入式样式）
    <标签 style=“属性：属性值;属性:属性值;”></标签>

3.2 样式表的优先级

  • 内联样式表的优先级别最高
  • 内部样式表与外部样式表的优先级和书写的顺序有关，后书写的优先级别高。
  1. CSS选择器及选择器的权重

4.1 CSS选择器

  • 标签选择器/元素选择器
    语法：
    标签名 {属性：属性值；}
    说明：
    • 标签选择器就是以文档语言对象类型作为选择器，即使用结构中元素名称作为选择器
    • 所有的页面元素都可以作为选择器
  • id选择器
    语法：
    id名 {属性：属性值;}
    说明：
    • 当我们使用id选择器时，应该为每个元素定义一个id属性
      如：
    • id选择器的语法格式是“#”加上自定义的id名
      如：#box{width:300px; height:300px;}
    • 起名时要取英文名，不能用关键字：(所有的标记和属性都是关键字)
      如：head标记
    • 一个id名称只能对应文档中一个具体的元素对象，因为id只能定义页面中某一个唯一的元素对象。
    • 最大的用处：创建网页的外围结构。
  • class选择器
    语法：
    .class名 {属性：属性值;}
    说明：
    • 当我们使用class选择器时，应先为每个元素定义一个类名称
    • class选择器的语法格式是：如：

      用法：
      页面中应大量使用class选择器定义样式；
  • 通配符
    语法：
    {属性：属性值；}
    说明：
    通配选择器的写法是“    ”，其含义就是所有元素。
    用法：
    常用来重置样式。
  • 群组选择器
    语法：
    选择器1，选择器2，选择器3{属性：属性值;}
    说明：
    当有多个选择器应用相同的样式时，可以将选择器用“，”分隔的方式，合并为一组。
  • 包含选择器
    语法：
    选择器1 选择器2{属性：属性值;}
    说明：
    选择器1和选择器2用空格隔开，含义就是选择器1中包含的所有选择器2;
  • 伪类选择器
    语法 ：
    a:link{属性：属性值;}超链接的初始状态;
    a:visited{属性：属性值;}超链接被访问后的状态;
    a:hover{属性：属性值;}鼠标悬停，即鼠标划过超链接时的状态;
    a:active{属性：属性值;}超链接被激活时的状态，即鼠标按下时超链接的状态;
    说明：
    • 当这4个超链接伪类选择器联合使用时，应注意他们的顺序，正常顺序为：
      a:link,a:visited,a:hover,a:active,错误的顺序有时会使超链接的样式失效；
    • 为了简化代码，可以把伪类选择器中相同的声明提出来放在a选择器中；
      例如：a{color:red;} a:hover{color:green;} 表示超链接的三种状态都相同，只有鼠标划过变颜色。

4.2 CSS选择器的权重

CSS中用四位数字表示权重，权重的表达方式如：0，0，0，0

  • 标签选择符的权重为0001
  • class选择符的权重为0010
  • id选择符的权重为0100
  • 属性选择符的权重为0010
  • 伪类选择符的权重为0010
  • 包含选择符的权重：为包含选择符的权中之和
  • 内联样式的权重为1000

说明：

  • 当不同选择器的样式设置有冲突的时候，高权重选择器的样式会覆盖低权重选择器的样式。
    例如：b.demo的权重是1+10=11
    .demo的权重是10
    所以经常会发生.demo的样式失效
  • 相同权重的选择器，样式遵循就近原则：哪个选择器最后定义，就采用哪个选择器样式。

5 浮动及清浮动

5.1 浮动的使用

  • 语法：
    float: none/left/right;

  • 三个取值：
    left:元素活动浮动在文本左面
    right:元素浮动在右面
    none:默认值，不浮动。

  • 浮动的目的：
    就是让竖着的东西横着来

  • 示例：
    如下图， 首先要知道，div是块级元素，在页面中独占一行，自上而下排列，也就是传说中的流

    可以看出，即使div1的宽度很小，页面中一行可以容下div1和div2，div2也不会排在div1后边，因为div元素是独占一行的
    注意：
    以上这些理论，是指标准流中的div。
    无论多么复杂的布局，其基本出发点均是：“如何在一行显示多个div元素”。
    显然标准流已经无法满足需求，这就要用到浮动。
    浮动可以理解为让某个div元素脱离标准流，漂浮在标准流之上，和标准流不是一个层次。

5.2 清浮动

元素浮动之前，也就是在标准流中，是竖向排列的，而浮动之后可以理解为横向排列

清除浮动可以理解为打破横向排列。

清除浮动的关键字是clear，语法：

clear : none | left | right | both

none  :  默认值。允许两边都可以有浮动对象

left   :  不允许左边有浮动对象

right  :  不允许右边有浮动对象

both  :  不允许有浮动对象

对于CSS的清除浮动(clear)，一定要牢记：这个规则只能影响使用清除的元素本身，不能影响其他元素。

  1. CSS核心属性

6.1 CSS文本属性

  • 文本大小：
    {font-size: value;}
    说明：
    • 属性值为数值型时，必须给属性值加单位，属性值为0时除外。
    • 单位还可以是pt，9pt=12px
  • 文本颜色：
    {color:颜色值;}
  • 文本字体：
    {font-family: 字体1，字体2，字体3;}
    说明：
    • 浏览器首先会寻找字体1、如在字体1不存在的情况下，则会寻找字体2，如字体2也不存在，按字体3显示内容，如果字体3 也不存在；则按系统默认字体显示；
  • 文字加粗
    {font-weight: bolder(更粗的)/bold（加粗）/normal（常规）/100—900;}
    说明：
    • 在css规范中，把字体的粗细分为9个等级，分别为100——900，其中100对应最轻的字体变形，而900对应最重的字体变形，
    • 100-400 一般
      500常规字体
      600-900加粗字体
  • 文字倾斜
    {font-style：italic/oblique/normal（取消倾斜，常规显示);}
    说明：
    • italic和oblique都是向右倾斜的文字, 但区别在于Italic是指斜体字，而Oblique是倾斜的文字，对于没有斜体的字体应该使用Oblique属性值来实现倾斜的文字效果.
  • 水平对齐方式
    {text-align:left/right/center/justify（两端对齐中文不起作用）;}
  • 文字行高 {line-height:normal/value;}
    说明：
    • 当单行文本的行高等于容器高时，可实现单行文本在容器中垂直方向居中对齐；
  • 文本修饰
    {text-decoration:none/underline/overline/line-through;}
    说明：
    • none:没有修饰
    • underline:添加下划线
    • overline:添加上划线
    • line-through:添加删除线
  • 首行缩进：
    {text-indent:value;}
    说明：
    • text-indent可以取负值；
    • text-indent属性只对第一行起作用。
  • 字间距
    {letter-spacing:value;}
    说明：
    • 控制英文字母或汉字的字距。（英文字母和字母）

6.2 css列表属性

  • 定义列表符号样式
    list-style-type：disc(实心圆)/circle(空心圆)/square(实心方块)/none(去掉列表符号)；
  • 使用图片作为列表符号
    list-style-image：url(所使用图片的路径及全称)；
  • 去掉列表符号
    list-style:none;

6.3 css背景属性

  • 背景颜色
    语法：
    background-color:颜色值;
  • 背景图片的设置
    语法：
    background-image：url(背景图片的路径及全称)；
    说明：
    • 网页上有两种图片形式：插入图片、背景图；
    • 插入图片：属于网页内容，也就是结构。
    • 背景图：属于网页的表现，背景图上可以显示文字、插入图片、表格等。
  • 背景图片的显示原则:
    • 容器尺寸等于图片尺寸，背景图片正好显示在容器中
    • 容器尺寸大于图片尺寸，背景图片将默认平铺，直至铺满元素；
    • 容器尺寸小于图片尺寸，只显示元素范围以内的背景图。
  • 背景图片平铺属性
    语法：
    background-repeat:no-repeat/repeat/repeat-x/repeat-y
    说明：
    no-repeat:不平铺
    repeat：平铺
    repeat-x：横向平铺
    repeat-y ：纵向平铺
  • 背景图的固定
    语法：
    {background-attachment:scroll(滚动)/fixed(固定);
    说明：
    • fixed； 固定，不随内容一块滚动；
    • scroll: 随内容一块滚动。
  • 背景图片的位置
    语法：
    {background-position:left/center/right/数值 top/center/bottom/数值;}
    说明：
    • 水平方向上的对齐方式（left/center/right）或值
    • 垂直方向上的对齐方式(top/center/bottom)或值
    • background-position:值1 值2;
      • 两个值 ：第一个值表示水平位置的值，第二个值：表示垂直的位置。
      • 当两个值都是center的时候写一个值就可以代表的是水平位置和垂直位置
      • 向左方向，向上方向是负值
  1. 盒子模型

7.1认识盒子模型

  • 盒模型是css布局的基石，它规定了网页元素如何显示以及元素间相互关系。css定义所有的元素都可以拥有像盒子一样的外形和平面空间，即都包含边框、边界、补白、内容区，这就是盒模型。

7.2 盒子模型的相关元素

  • 边框属性border
    • 语法：
      {border: 边框宽度 边框风格 边框颜色;}
    • 例如：
      {border:5px solid #ff0000;}
      说明：
      边框宽度：border-width
      边框样式：border-style:solid(实线)/dashed(虚线)dotted(点划线)double(双线)
      边框颜色：border-color
    • 可单独设置一方向边框
      border-bottom:边框宽度 边框风格 边框颜色;底边框
      border-left:边框宽度 边框风格 边框颜色;左边框
      border-right:边框宽度 边框风格 边框颜色;右边框
      border-top:边框宽度 边框风格 边框颜色;上边框
  • 内边距padding
    • 语法：
      四个值：上 右 下 左 {padding:0px 0px 0px 40px;}
      三个值：上 左右 下 {padding:10px 20px 30px ;}
      二个值：上下 左右 {padding:10px 20px ;}
      一个值：四个方向 padding:2px;/定义元素四周填充为2px/
    • 说明：可单独设置一方向填充，如：上方向padding-top:10px; 右方向padding-right:10px; 下方向padding-bottom:10px; 左方向padding-left:10px;
    • 用法：
      • 用来调整内容在容器中的位置关系
      • 用来调整子元素在父元素中的位置关系。
      • padding属性需要添加在父元素上。
      • padding值是额外加在元素原有大小之上的，如想保证元素大小不变，需从元素宽或高上减掉后添加的padding属性值
  • 外边距margin
    • 语法：
      四个值：上 右 下 左
      三个值：上 左 右 下
      二个值：上下 左 右
      一个值：四个方向 如：margin:2px;
    • 说明：
      • 可单独设置一方向边界，如：margin-top:10px;
        margin-left:左边界
        margin-right:右边界
        margin-top:上边界
        margin-bottom:下边界
    • 居中：
      margin:0 auto;

7.3 盒子的实际大小

  • 宽 =左右margin+左右border+左右padding+width，
  • 高 =上下margin+上下border+上下padding+height，
    • 例如：一个盒子的 margin 为 20px，border 为 1px，padding 为 10px，content 的宽为 200px、高为 50px，
    • 宽=margin2 + border2 + padding2 + content.width = 202 + 12 + 102 +200 = 262px，
    • 高=margin2 + border2 + padding2 + content.height = 202 + 12 +102 + 50 = 112px

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

二袋米抗几楼
关注
专栏目录
20230912_第二天_css.zip
09-12
在这个"20230912_第二天_css.zip"压缩包文件中，很可能包含了一系列关于CSS的学习资料，可能是课件、笔记、示例代码或者练习项目。由于没有具体的标签信息，我们将基于CSS的基础知识和常见应用进行详细阐述。 1. ...
CSS基础_css_笔记
09-23
**CSS基础：开启网页设计之旅** CSS，全称Cascading Style Sheets，是用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档样式的样式表语言。它是网页设计的重要组成部分，允许我们将表现与内容分离，使网页...
ttt_CSS2_css_zip_
09-30
【标题】"ttt_CSS2_css_zip_" 暗示了这是一个关于CSS（层叠样式表）第二版的压缩文件，可能包含了一系列有关CSS2的教程、代码示例或者资源集合。CSS2是Web设计中用于控制网页外观和布局的重要技术，它扩展了CSS1的...
css2全面教程.rar_css_css 教程_网站 教程_网站开发
09-19
通过深入学习和实践本教程，你将能够熟练掌握CSS2，为创建美观、响应式的网站奠定坚实基础。无论是网页布局、颜色搭配还是交互设计，CSS2都提供了丰富的工具和方法，助你实现创意。记得结合实际项目练习，理论与实践...
css2.rar_css2
09-24
CSS2，全称为Cascading Style Sheets Level 2，是W3C组织发布的第二版CSS规范，它极大地扩展了CSS1的功能，为网页设计者提供了更为强大的样式控制能力。CSS2在1998年5月被正式推荐，至今仍广泛应用于网页设计领域。 ...
HTML单页面实现量子纠缠效果
weixin_52236586的博客
11-06 370
【代码】单页面量子纠缠效果。
初识HTML
chestnut_orenge的博客
11-05 935
什么是HTML呢？HTML是超文本标记语言，HTML代码是由“标签”构成的超文本：文本、声音、图片、视频、表格、链接标记：由许许多多的标签组成HTML页面是运行到浏览器上面的。
软件测试—HTML
qq_73187469的博客
11-09 265
web前端三大核心技术 - HTML 负责网页的架构 - CSS 负责网页的样式、美化 - JS 负责网页的行为
html checkbox和label 文字不对齐解决办法
天天打码-16年老码农
11-05 312
做用html或bootstrap时，表单元素和文字不对齐现实，不管用什么。
一七五、HTML 不同类型的事件及其说明和示例
梅某某
11-07 806
HTML 事件处理程序是通过 JavaScript 来捕获和响应不同的用户操作、系统事件或浏览器事件。下面是不同类型的事件及其说明和示例。
【Pikachu靶场：XSS系列】xss之过滤，xss之htmlspecialchars，xss之herf输出，xss之js输出通关啦
m0_47484034的博客
11-05 449
【Pikachu靶场：XSS系列】xss之过滤，xss之htmlspecialchars，xss之herf输出，xss之js输出通关啦
常见前端代码分析面试题Javascript|html
警警的博客
11-08 559
html\CSS\Javascript
Java与HTML中的标题、文本和图像
2301_77081232的博客
11-09 661
html复制代码 <h1>这是一级标题</h1> <h2>这是二级标题</h2> 标题标签不仅用于显示不同级别的标题内容，还对搜索引擎优化（SEO）有着重要意义。搜索引擎会根据标题标签的层级结构来理解网页内容的层次关系。 在Java中生成HTML标题 在Java中，我们可以通过字符串拼接或者使用模板引擎（如Thymeleaf、Freemarker等）来生成包含标题标签的HTML内容。 以字符串拼接为例： java复制代码 public class HtmlTit
HTML CSS H5C3样式语句汇总20241105
m0_63615119的博客
11-05 396
H5C3样式语句汇总20241105
HTML5+css3（浮动，浮动的相关属性，float，解决浮动的塌陷问题，clear，overflow，给父亲盒子加高度，伪元素）
2301_81256766的博客
11-09 205
HTML5+css3（浮动，浮动的相关属性，float，解决浮动的塌陷问题，clear，overflow，给父亲盒子加高度，伪元素）
零基础上手WebGIS+智慧校园实例（1）【html by js】
2403_83182682的博客
11-09 901
！等下再更新一下1. WebGIS矢量图形的绘制（超级详细！！），2. WebGIS计算距离， 以及智慧校园实例 with 3个例子！！！！，尽情期待！！！之后代码+资料全部发到github里，希望大家能关注一下咱的Github进行WebGIS开发时，引入API是一个关键步骤，它允许开发者将地图服务和功能集成到自己的Web应用中。一、API简单定义。
【JavaEE进阶】HTML
最新发布
2401_83227065的博客
11-09 624
HTML(Hyper Text Markup Language), 超⽂本标记语⾔.超⽂本:⽐⽂本要强⼤. 通过链接和交互式⽅式来组织和呈现信息的⽂本形式. 不仅仅有⽂本, 还可能包含图⽚, ⾳频, 或者⾃已经审阅过它的学者所加的评注、补充或脚注等等.标记语⾔:由标签构成的语⾔HTML的标签都是提前定义好的, 使⽤不同的标签, 表⽰不同的内容.类似⻜书⽂档, Word⽂档如果选中⽂本, 点击标题1, 就会使⽤标题1的样式来显⽰⽂本, 上述标题1就是⼀个"标签"<h1>我是⼀级标题</h1>
Java与HTML：构建静态网页
2301_77081232的博客
11-09 565
在Web开发领域，HTML是构建网页的基础标记语言，而Java作为一种强大的编程语言，也能够在创建HTML内容方面发挥重要作用。今天，我们就来探讨一下如何使用Java来制作一个不那么简单的静态网页。
HTML&CSS：3D 旋转卡片的炫酷动画
weixin_52814911的博客
11-05 878
这段代码是一个HTML和CSS的组合，用于创建一个具有3D效果的动画卡片。
CSS精通：第二版精华解析
"Css.Mastery.2nd.pdf" 是一本关于CSS高级技巧的书籍，第二版，由Andy Budd、Cameron Moll和Simon Collison合著，前言由Dan Cederholm撰写。书中涵盖了最新的CSS技巧、窍门和技术，深入探讨了可以立即使用的CSS3特性...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值