CSS样式总结（作业六）

时间：2023-02-14 21:42:14

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：盒子模型

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

CSS样式总结（作业六）

6：定位

（1）相对定位（relative）：相对于当前位置定位。

（2）绝对定位（absolute）：相对于body定位。

（3）固定定位（fixed）：相对于视图定位。

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

CSS样式总结（作业六）的更多相关文章

  1. CSS特异性（CSS Specificity）的细节之CSS样式权重的计算与理解（CSS样式覆盖规则）

    本篇讲解CSS特异性(CSS Specificity)的细节,也就是CSS样式选择器的权重计算 通过计算选择器的权重(weight)最终决定哪个选择器将获得优先权去覆盖其他选择器的样式设定,即“优先原 ...

  2. 用原生JS读写CSS样式的方法总结

    为了日后方便查询,本人翻阅了一些资料总结了以下方法,仅限原生JS,如有不对的地方欢迎指出!只求大家看完觉得有学到点什么就OK了!   一.可以通过DOM节点对象的style对象(即CSSStyleDe ...

  3. css样式管理

    css命名 传统网站页面(企业级),大概就是about,product,register等,他们的名字较好区分,他们的样式整体也不会很大,用简单的驼峰法就够了,或者简单的模块. 非传统企业页面,命名驼 ...

  4. &lbrack;css&rsqb;样式合并与模块化

    原文链接:http://www.zhangxinxu.com/wordpress/2010/07/css%E7%9A%84%E6%A0%B7%E5%BC%8F%E5%90%88%E5%B9%B6%E4 ...

  5. &lbrack;css&rsqb;【转载】CSS样式分离之再分离

    原文链接:http://www.zhangxinxu.com/wordpress/2010/07/css%E6%A0%B7%E5%BC%8F%E5%88%86%E7%A6%BB%E4%B9%8B%E5 ...

  6. css样式兼容不同浏览器问题解决办法

    在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果! 所 有浏览器 ...

  7. Emmet快速编写CSS样式

    基本的CSS样式编写时,很多样式只需输入首字母即可得到不带属性值的CSS样式,像上面说到的margin. 1.而对于一些带有特定的属性值的CSS样式,只需输入CSS标签与属性值的首字母就可以,比如: ...

  8. 使文字在div中水平和垂直居中的的css样式为，四个边分别设置阴影样式

    text-align:center; /*水平居中*/ line-height: 20px; /*行距设为与div高度一致*/ HTML元素 <div>水平垂直居中</div> ...

  9. css样式兼容各个浏览器时的部分总结

    [本文基本是在网络转发过来的,网站就忘记了,这文本都是保存在自己电脑本地的,还有些自己添加了些内容,这内容还会有不断的完善和更行的] 什么是浏览器兼容:当我们使用不同的浏览器(Firefox IE7 ...

随机推荐

  1. CSS中详解hight属性

    目录结构: // contents structure [-] hight属性值类型一览表 height的%的使用 定义 实例 需要注意的 参考文章 hight属性值类型一览表 value descr ...

  2. php适配器设计模式

    <?php //适配器模式 //服务器端代码 class tianqi{ public static function show(){ $today= array('tep' =>28 , ...

  3. Datagard產生gap

    本文轉載自無雙的小寶的博客:http://www.cnblogs.com/sopost/archive/2010/09/11/2190085.html 有時候因為網路或備份故障等原因,主機所產生的歸檔 ...

  4. StringIO学习

    StringIO StringIO的行为与file对象非常像,但它不是磁盘上文件,而是一个内存里的“文件”,我们可以将操作磁盘文件那样来操作StringIO.一个简单的例子,让你对StringIO有一 ...

  5. Physically Based Render in Game 序

    基于物理渲的渲染理论,从SIGGRAPH06被Naty Hoffman等人提出后,近年来也越来越多的被各大游戏公司所采用,几乎已经是次世代游戏的标准特性,也是每个3D游戏工作者所必备的知识,尽管每年S ...

  6. 利用自动类型转换存储string类型

    类型转换是我们最常用的功能.就像上战场用的枪一样,敌人用的冲锋枪, 自己手里就一把步枪,打起仗来始终有点不爽. 因此,基本功能的完善很重要. 通常情况下我们需要String类型转其它的基础类型.这时我 ...

  7. MySQL学习3 - 数据表的操作

    本节掌握 一.存储引擎(了解) 二.mysql支持的存储引擎 1.InnoDB 存储引擎 2.MyISAM 存储引擎 3.NDB 存储引擎 4.Memory 存储引擎 5.Infobright 存储引 ...

  8. 增加tomcat的运行速度

    1.增加tomcat的运行速度

  9. Hadoop系列-MapReduce基础

    由于在学习过程中对MapReduce有很大的困惑,所以这篇文章主要是针对MR的运行机制进行理解记录,主要结合网上几篇博客以及视频的讲解内容进行一个知识的梳理. MapReduce on Yarn运行原 ...

  10. &lbrack;总结帖&rsqb; 后端MVC V&period;S&period; 前端MVVM

    Web编年史: Web1.0 —— 静态页面.简单预处理语言草案:PHP.JSP.ASP Web2.0 —— 企业级架构.一站式解决方案(MVC):J2EE.Spring.Asp.net Web2.5 ...

相关文章