css知识点总结
1.从css样式代码插入的形式来看基本可以分为以下3种:内联式、嵌入式和外部链接式三种。
a.内联式css样式:
<p style="color:red;font-size:12px">这里文字是红色。</p>
b.嵌入式css样式:
<style type="text/css"> span{ color:red; } </style>
c.外部链接式css样式:
<link href="base.css" rel="stylesheet" type="text/css" />
<link>标签位置一般写在<head>标签之内。
2.样式的优先级:
基本选择器之间:ID选择器>类选择器>标签选择器;
样式表之间:行内样式>内嵌样式>外部样式;
css样式之间:在同一个选择器中,两条相同的声明,后一条会覆盖前一条样式;
3.设置最高优先级:
我们在做网页代码的时,有些特殊的情况需要为某些样式设置具有最高优先级,我们可以使用!important来解决。
p{color:red!important;}
注意:!important要写在分号的前面。
4.文字的一些特殊属性:
a.font-style属性 normal - 文本正常显示; italic -文本斜体显示; oblique - 文本倾斜显示。
b.font-variant 属性设置小型大写字母 font-variant:small-caps;
c.font-size-adjust属性设置不同的字体大小 font-size-adjust:0.60;
5.段落的一些属性:
a.缩进 text-indent:2em; 注意:2em的意思就是文字的2倍大小;
b.文字间隔、字母间隔设置 letter-spacing:5px;
c.单词间距设置 word-spacing:5px;
d.文字两端对齐 text-align:justify;
e.删除文本修饰 text-decoration:none;
f.设置文本中间划线 text-decoration:line-through;
g.文本阴影 text-shadow: x y shadow color; 该属性可以有4个值,其中前2个是必需的值,用来指定阴影的延伸距离,值为长度值,并且允许负值,其中 x 是水平阴影的偏移值,y 是垂直阴影的偏移值。最后2个值都是可选的,shadow 用于指定阴影的模糊值,即模糊效果的作用距离,不允许负值。color 指定阴影的颜色。
h.文本转换:text-transform:capitalize; 定义文本中的每个单词以大写字母开头。
text-transform:uppercase; 定义文本仅有大写字母;
text-transform:lowercase; 定义文本仅有小写字母;
6.背景属性:
a.背景图像是否固定或者随着页面的其余部分滚动 background-attachment:fixed;
b.设置背景的起始位置 background-position:10% 10%;
c.设置背景图像显示一次 background-repeat:no-repeat;
7. css布局模型
在网页中,元素有三种布局模型:流动模型、浮动模型、层模型;
a.流动模型:流动(Flow)是默认的网页自上而下的布局模式。也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。
流动模型的两个特征:
第一点,块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布,因为在默认状态下,块状元素的宽度都为100%。实际上,块状元素都会以行的形式占据位置。如块状元素标签(div,h1,p)宽度显示为100%。
第二点,在流动模型下,内联元素都会在所处的包含元素内从左到右水平分布显示。内联元素标签a、span、em、strong都是内联元素。
b.浮动模型:任何元素在默认情况下是不能浮动的,但可以用CSS定义为浮动,如div、p、table、img等元素都可以被定义为浮动。如下代码可以实现两个div元素一行显示。
注意:设置浮动的同时一定要先设置块状元素的宽度,且需要浮动的几个元素宽度加起来一定要小于容器元素的宽度。
c.层模型:像是图像软件PhotoShop中非常流行的图层编辑功能一样,每个图层能够精确定位操作。
层模型有三种形式:
绝对定位(position: absolute)
相对定位(position: relative)
固定定位(position: fixed)
相关推荐
html+css知识点总结
CSS知识点总结中包含了关于CSS3的基础概念和属性应用的详细说明。CSS,全称为层叠样式表(Cascading Style Sheets),是一种用于描述HTML或XML(包括各种XML方言,如SVG或XHTML)文档的样式的语言。下面将详细介绍...
在这个“css知识点总结包含xmind文件”的压缩包中,包含了多种格式的CSS知识点思维导图,帮助学习者系统地理解和掌握这一关键技术。 首先,网页版的CSS知识点总结可能是一个在线交互式的文档,通过浏览器访问,用户...
从HTML被发明开始,样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。 随着HTML的成长,为了满足页面设计者的要求,HTML添加...于是CSS便诞生了。
html、css知识点,归纳整理。包括基本标签、样式、例子、运行环境等。欢迎大家讨论、更正,共同进步!
讲解一些刚入门的有关css的知识点,有助于我们能更容易的学懂css语言,例如表单制作,框架等等。
HTML 和 CSS 是构建网页的基本语言,它们在...这些只是 HTML 和 CSS 的一部分基础知识,实际应用中还涉及到更复杂的布局、响应式设计、浏览器兼容性以及性能优化等方面。持续学习和实践是成为优秀前端开发者的关键。
下面是Css知识点总结: 基本格式 Css的基本格式是选择器{属性:值;},其中选择器是指要应用样式的HTML元素,属性是指要设置的样式属性,值是指设置的样式值。例如:p{color:red;},其中p是选择器,color是属性,...
这个"HTML/CSS壁纸.zip"压缩包显然包含了作者个人整理的HTML和CSS相关知识点,以壁纸的形式呈现,旨在帮助学习者随时复习和熟悉这些基础知识。 首先,HTML是网页的基础框架,它通过各种标签来定义内容的结构,如`...
CSS知识点总结: 1. CSS选择器:CSS选择器是CSS规则的核心,常见的选择器有ID选择器、Class选择器、标签选择器、伪类选择器等。 2. CSS样式规则:CSS样式规则包括选择器和声明,声明是指样式的具体内容,例如字体、...
CSS 知识点总结 CSS(Cascading Style Sheets)是用来控制网页样式和布局的StyleSheet 语言。以下是 CSS 的一些重要知识点: 1. CSS 选择器:CSS 选择器是用于选择要应用样式的HTML元素的方式,例如 `.class` 选择...
CSS 知识点总结 CSS(Cascading Style Sheets)是 Web 前端开发的样式语言,用于描述网页的样式和布局。CSS 的主要知识点包括: * CSS 选择器:CSS 选择器是用于选取 HTML 元素的规则,包括标签选择器、类选择器、...
css3笔记知识点总结
Css (层叠样式表)是种格式化网页的标准方式, 用于控制设置网页的样式,并且允许CSS样式信息与网页内容(由HTML语言定义)分离的一种技术。...本资源完整详细的记录了CSS 面试知识点总结,有需要的朋友可以下载学习。
### 二、CSS知识点总结 #### 1. CSS基础 - **定义**:CSS(Cascading Style Sheets)即层叠样式表,用于控制网页元素的布局和外观。 - **作用**:通过CSS可以轻松地为HTML文档添加样式,如颜色、字体、间距等。 - *...
HTML+CSS+JavaScript 知识点总结 HTML 基础知识: 1. HTML 是网页内容的载体,负责承载网页的内容。 2. HTML 标签不区分大小写,但建议使用小写。 3. 一个 HTML 文件由和两部分组成,用于定义文档的头部,用于承载...
HTML5/CSS3 面试题及答案 - CSS 篇 ...本文档旨在提供一个详细的 CSS 知识点总结,涵盖了 CSS 的新特性、选择符、盒模型、浮动、垂直居中等多个方面,以便帮助读者更好地理解和掌握 CSS 的知识点。
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的...本资源是CSS 面试知识点总结合集,有需要的朋友可以下载学习。
#### 二、CSS知识点总结 **2.1 CSS基础知识** - **CSS概述**:CSS(Cascading Style Sheets)是一种用来表现HTML或XML等文件样式的计算机语言。 - **CSS选择器** - 类选择器(`.className`) - ID选择器(`#id...