文档章节

CSS样式总结(作业六)

o
 osc_fmg49rzg
发布于 2019/03/20 10:33
字数 1129
阅读 13
收藏 0
red

精选30+云产品,助力企业轻松上云!>>>

1:CSS基本介绍

  CSS全称为“层叠样式表 (Cascading Style Sheets)”,它主要是用于定义HTML内容在浏览器内的显示样式,如文字大小、颜色、字体加粗等。 css 样式由选择符和声明组成,而声明又由属性和值组成。

       例:top{background:red;} top为选择符,“background:red”为声明,”background“为属性,”red“为值。

2:CSS的使用

  (1)内联式: 

    内联式是把代码直接写在html标签里面的。例:<div style="background:red">

  (2)嵌入式:

    嵌入式是将样式写在<style></style>之间,并且一般情况下<style></style>是在<head></head>之间的。例:<style>div{background:red}</style>

  (3)外部式:

    外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中,这个css样式文件以“.css”为扩展名,在<head>内(不是在<style>标签内)使用<link>标签将css样式文件链接到HTML文件内,如下面代码:

    <link href="base.css" rel="stylesheet" type="text/css" />

    注意:

    1、css样式文件名称以有意义的英文字母命名,如 main.css。

    2、rel="stylesheet" type="text/css" 是固定写法不可修改。

    3、<link>标签位置一般写在<head>标签之内。

优先级:内联>嵌入>外部。新的样式会覆盖旧的样式。

3:标签选择器

  (1)类选择器:.类选器名称{css样式代码;}

  (2)id选择器:#id选择器名称{css}

  (注意:标签可以用多个类名,但只能有一个id。例:<div class="class1 class2">是对的。<div id="id1 id2">是错的。)

  (3)子选择器,即大于符号(>),用于选择指定标签元素的第一代子元素。如右侧代码编辑器中的代码:
   .food>li{border:1px solid red;}
   这行代码会使class名为food下的子元素li加入红色实线边框。
  (4)包含选择器,即加入空格,用于选择指定标签元素下的后辈元素。
  .first span{color:red;}
  注意这个选择器与子选择器的区别,子选择器(child selector)仅是指它的直接后代,或者你可以理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择,而            子选择器是通过“>”进行选择。
  通用选择器是功能最强大的选择器,它使用一个(*)号指定,它的作用是匹配html中所有标签元素,如下使用下面代码使用html中任意标签元素字体颜色全部设置为红色:
  * {color:red;}

  CSS样式是可以继承的。但是权值很低。有一些样式是不能继承的。比如border。

4:块级元素与内联元素

块级元素特点:
1、每个块级元素都从新的一行开始,并且其后的元素也另起一行。
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。
在html中,<span>、<a>、<label>、 <strong> 和<em>就是典型的内联元素(行内元素)(inline)元素。当然块状元素也可以通过代码display:inline将元素设置为内联元素。如下代码就是将块状元素div转换为内联元素,从而使 div 元素具有内联元素特点。
div{
display:inline;
}
内联元素特点:
1、和其他元素都在一行上;
2、元素的高度、宽度及顶部和底部边距不可设置;
3、元素的宽度就是它包含的文字或图片的宽度,不可改变
4、a{display:block;}就是把内联元素拥有块级元素的特点。

5:盒子模型

将元素按照一定的规律封装到盒子中。注意:盒子的高度和宽度与我们理解的高度宽度不一样。上图:

 

 

6:定位

(1)相对定位(relative):相对于当前位置定位。

(2)绝对定位(absolute):相对于body定位。

(3)固定定位(fixed):相对于视图定位。

(4)参照与其他元素的定位:被参照元素必须是定位元素的前辈,被参照元素要加上relative,定位元素要加上absolute(关于我的理解:如果一个元素被加上了absolute,他就向他的前辈找relative。找不到就相对于body定位)

 

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
转行学前端的第 21 天 : 基础店铺页面样式实现最后篇

我是小又又,住在武汉,做了两年新媒体,准备用 6 个月时间转行前端。 今日学习目标 按照昨天的规划,基于昨天实现基础店铺页面上中半部分样式设计思路,实现页面下部的页面效果,今天就要将...

小又又
04/28
0
0
葛永强周作业

在这一个星期学完了HTML,CSS学习了几章 有关文本输入框和密码输入框 type:当type="text"时,输入框为文本输入框; 当type="password"时, 输入框为密码输入框。 name:为文本框命名,以备后台...

葛永强
2015/10/27
6
2
2020-06-02 Beta冲刺第六天

这个作业属于哪个课程 课程地址 这个作业要求在哪里 作业地址 这个作业的目标 2020-06-02 Beta冲刺第六天 作业正文 作业正文地址 其他参考文献 《构建之法现代软件工程》 明日安排/问题困难/...

osc_cd2qhmfp
06/04
4
0
2020-06-02 Beta冲刺第六天

这个作业属于哪个课程 课程地址 这个作业要求在哪里 作业地址 这个作业的目标 2020-06-02 Beta冲刺第六天 作业正文 作业正文地址 其他参考文献 《构建之法现代软件工程》 明日安排/问题困难/...

豌豆射手x
06/03
0
0
码到成功——Beta冲刺随笔 day 1

码到成功——Beta冲刺随笔 day 1 这个作业属于哪个课程 班级的链接 这个作业要求在哪里 作业要求的链接 这个作业的目标 计划阶段4天,Beta冲刺阶段共计10天,冲刺阶段要求每天进行小组会议,...

osc_t6qz550e
05/25
7
0

没有更多内容

加载失败,请刷新页面

加载更多

linux下java环境搭建

1、jdk下载: 官方地址:https://www.oracle.com/java/technologies/javase/javase-jdk8-downloads.html 如下图所示,我这边选择的是红框中的版本 2、压缩包上传至服务器 将下载的压缩包上传...

wc_飞豆
54分钟前
17
0
面试题:Java对象不再使用时,为什么要赋值为null?

前言 许多Java开发者都曾听说过“不使用的对象应手动赋值为null“这句话,而且好多开发者一直信奉着这句话;问其原因,大都是回答“有利于GC更早回收内存,减少内存占用”,但再往深入问就回...

码农突围
56分钟前
22
0
设计模式(5) 原型模式

原型模式 原型模式的适用场景 浅拷贝 深拷贝 用Initialize方法修改初始化状态 原型模式与之前学习的各种工厂方法、单例模式、建造者模式最大、最直观的区别在于,它是从一个既有的对象“克隆...

zhixin9001
56分钟前
7
0
获取免费的pycharm激活码网站

http://www.lookdiv.com/

云烟成雨forever
56分钟前
27
0
用Helm部署Kubernetes应用,支持多环境部署与版本回滚

1 前言 Helm是优秀的基于Kubernetes的包管理器。利用Helm,可以快速安装常用的Kubernetes应用,可以针对同一个应用快速部署多套环境,还可以实现运维人员与开发人员的职责分离。现在让我们安...

南瓜慢说
57分钟前
25
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部