1、CSS:层叠样式表

一个元素允许同时应用多种样式,页面元素最终的样式即为多种样式的叠加效果。

2、CSS样式优先级
行内样式表>内部样式表>外部样式表【就近原则】
id选择器>类选择器>标签选择器

3、文本属性:(缩写形式)
font:风格 粗细 大小/行高  字体1,字体2,字体3;
font-weight(粗细100-900)
font-size(大小)
font-family(字体)font-style(风格)

行距、对齐等:
line-height (行高)
text-align (对齐)  text-decoration(文本修饰)
letter-spacing (字符间距)white-space (空白处理)

【注意事项】

  • @charset "utf-8";    作用是为了避免样式中存在中文,打开时出现乱码的情况
  • 字体大小单位:px 固定值  相对值em(响应式布局)  转换关系16px=1em

4、背景相关属性: background (缩写形式):color image repeat attachment position ;
background-color(背景色)
background-image(背景图 )
background-repeat(背景图重复方式)
background-position(位置坐标、偏移量)【右下为正】
background-size(背景图大小)【cover覆盖、contain原图按比例拉伸、百分比】

background-attachment (背景图像是否固定)【scroll默认随页面滚动、fixed固定、inherit继承】

5、列表相关属性:列表(li)常用属性
list-style (列表风格)
属性值 方式 语法实现 示例
none 无风格 list-style:none; 刷牙
洗脸
disc 实心圆 <ul>list-style:disc; ● 刷牙
● 洗脸
circle 空心圆 list-style:circle; ○ 刷牙
○ 洗脸
square 实心正方形 list-style:square; ■ 刷牙
■ 洗脸
decimal 数字 <ol>list-style:decimal 1. 刷牙
2. 洗脸

6.处理溢出(overflow):
?overflow 的取值可以是 visible | hidden | scroll | auto , 其中 visible 是默认值。
?值 visible 表示不裁减内容,也不添加滚动条,强制显示元素内容;
?hidden 表示裁减内容,而且不显示超出对象尺寸的内容;
?scroll 表示裁减内容,同时提供滚动条;
?auto 表示只有在必要时才裁减内容并添加滚动条。
注:如果我们要使用 overflow 属性,那么该元素的 position 属性必须指定
为绝对定位(absolute)
例:position: absolute;overflow: scroll;

7.指定裁剪区域(clip):
?clip属性可以确定定位对象的裁减区域
?取值为 rect (top right bottom left) | auto
?其中 top、 right、 bottom 和 left用于指定上、 右、 下、 左 4 个方向上的裁减长度
?取值为长度值或 auto。 如果任意一边使用 auto,则相当于该边没有进行裁减。
注:如果我们要使用 clip 属性,那么该元素的 position 属性必须指定
为绝对定位(absolute)
例:clip: rect(50px 200px auto auto);

8、元素可见性(display 属性和 visibility 属性):
?display 属性确定一个元素是否应显示在页面上以及如何显示。
?它的取值包括: none、 block、 inline等。
?none:元素在页面隐藏起来,不仅元素看不见,而且元素也将退出当前的页面布局层,不占用任何空间。
?block(块级): 可以强制将 HTML中的内嵌元素变为块级元素,从而引起后续对象换行
?inline(内嵌级):CSS强制将 HTML 中的块级元素变为内嵌元素。
?visibility 属性控制定位的元素是否可见。
?取值包括: visible(可见)、hidden(隐藏)和inherit(继承),默认值为 inherit(即继承父级元素的显示属性)。
?visibility 属性与 display 属性的不同之处在于:
?visibility当隐藏元素时,visibility 属性定义的元素仍然为保留原有的显示空间。
?display 当隐藏元素时,display 属性定义的元素在页面隐藏起来,不仅元素看不见,而且元素也将退出当前的页面布局层,不占用任何空间。

第二章 CSS基本属性的更多相关文章

  1. ASP.NET MVC with Entity Framework and CSS一书翻译系列文章之第二章:利用模型类创建视图、控制器和数据库

    在这一章中,我们将直接进入项目,并且为产品和分类添加一些基本的模型类.我们将在Entity Framework的代码优先模式下,利用这些模型类创建一个数据库.我们还将学习如何在代码中创建数据库上下文类 ...

  2. CSS+DIV网页样式与布局:第二章:CSS的基本语法

    第二章:CSS的基本语法 一 CSS选择器(所有的HTML语言中的标记都是通过不同的css选择器进行控制的).用户只需要 通过选择器对不同的HTML标签进行控制,并赋予各种样式声明,即可实现各种效果. ...

  3. 第二章、前端之css

    目录 第二章.前端之css 一.css介绍 二.css语法 三.css几种引入方式 四.css选择器 五.css属性相关 六.css盒子模型 第二章.前端之css 一.css介绍 css(Cascad ...

  4. 《Django By Example》第二章 中文 翻译 (个人学习,渣翻)

    书籍出处:https://www.packtpub.com/web-development/django-example 原作者:Antonio Melé (译者注:翻译完第一章后,发现翻译第二章的速 ...

  5. Asp.Net MVC4 + Oracle + EasyUI 学习 第二章

    Asp.Net MVC4 + Oracle + EasyUI 第二章 --使用Ajax提升网站性能 本文链接:http://www.cnblogs.com/likeli/p/4236723.html ...

  6. [A Top-Down Approach][第二章 应用层]

    [A Top-Down Approach][第二章 应用层] 标签(空格分隔): 未分类 网络应用是计算机网络存在的理由 首先从定义几个关键的应用层概念开始 应用程序所需要的网络服务,客户和服务器,进 ...

  7. Javascript高级程序设计读书笔记(第二章)

    第二章  在HTML中使用Javascript 2.1<script>元素 延迟脚本(defer = "defer")表明脚本在执行时不会影响页面的构造,脚本会被延迟到 ...

  8. ORACLE AUTOMATIC STORAGE MANAGEMENT翻译-第二章 ASM instance(1)

    第二章  ASM INSTANCE ASM的类型,例如可以: 10g后ORACLE instance 类型增加了一个ASM种类.参数INSTANCE_TYPE=ASM进行设置. ASM实例启动命令: ...

  9. ASP.NET自定义控件组件开发 第二章 继承WebControl的自定义控件

    原文:ASP.NET自定义控件组件开发 第二章 继承WebControl的自定义控件 第二章 继承于WebControl的自定义控件 到现在为止,我已经写了三篇关于自定义控件开发的文章,很感谢大家的支 ...

随机推荐

  1. linux:基本指令ls、cd

    cd 指令  使用 cd 指令, 我们能在 Terminal 中轻松切换到不同的文件夹. 想从 Home 去 Documents 这个文件夹? 输入下面的命令就可以了. ~$ cd Documents ...

  2. Linux上mount 挂载windows共享文件权限问题

    在服务器部署的时候需要把文件夹设置在windows的共享文件上.在使用mount命令挂载到linux上后.文件路径和文件都是可以访问,但是不能写入,导致系统在上传文件的时候提示“权限不够,没有写权限” ...

  3. 约数,gcd,exgcd.

    很多题都是要求出什么最大公约数或者最小公倍数什么的,也有一些题目是和约数个数有关的,所以需要总结一下. 首先最大公约数和最小公倍数怎么求呢? 当然是观察法了,对于一些很聪明的孩纸他们一般随便一看就秒出 ...

  4. Excel--数据透视图

    原文:https://ke.qq.com/course/289406 1.数据源注意项 2. 3.选中数据源操作 任意选中数据源表格中的单元格(有值得单元格),插入数据透视表 默认数据源区域就是整个表 ...

  5. MyEclipse中JDK运行环境和编译环境的设置

    一.设置myEclipse中新项目使用的JDK 1.运行环境   [Window]->[Preferences]->[Java]->[Installed JREs] 步骤:Add-- ...

  6. 【Python全栈-后端开发】Django入门基础

    Django基础知识 一. 什么是web框架? 框架,即framework,特指为解决一个开放性问题而设计的具有一定约束性的支撑结构,使用框架可以帮你快速开发特定的系统,简单地说,就是你用别人搭建好的 ...

  7. 敏捷开发之Scrum扫盲篇(转)

    现在敏捷开发是越来越火了,人人都在谈敏捷,人人都在学习Scrum和XP... 为了不落后于他人,我也开始学习Scrum.今天主要是对我最近阅读的相关资料,根据自己的理解,用自己的语言来描述Scrum中 ...

  8. SpringBoot静态资源访问

    在我们开发Web应用的时候,需要引用大量的js.css.图片等静态资源. 默认配置: Spring Boot默认提供静态资源目录位置需置于classpath下,目录名需符合如下规则: /static ...

  9. discuz优化10个小技巧

    Discuz论坛是国内使用最多的论坛系统,现在最新版为X 3.4,X3.4 从 2018 年 1 月 1 日起只在官方 Git 发布,地址:https://gitee.com/ComsenzDiscu ...

  10. 【环境配置】配置jdk

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/manoel/article/details/37736569 1. 下载jdk的安装文件 http: ...