CSS基本知识点

最新推荐文章于 2024-04-02 14:24:22 发布

风飘向太阳

最新推荐文章于 2024-04-02 14:24:22 发布

阅读量428

点赞数

分类专栏： HTML 文章标签： html css

本文链接：https://blog.csdn.net/fpxty/article/details/70147452

版权

HTML 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

CSS简介

一、CSS是Cascading StyleSheets(层叠样式表)的简称。更多的人把它称为样式表，顾名思义，它是一种设计网页样式的工具。它可以作为HTML，XHTML，XML的样式控制语言。

二、CSS的语法结构：选择符{属性:值} 例如：body{font-size:12px;}

参数说明：

1、选择符(Selector)：指明这组样式所要针对的对象，可以是一个XHTML标签，如body，h1；也可以是定义了特定的id或class类的标签，如#main选择符表示选择<div id=

”main”>,即一个被指定了main为id的对象。

2、属性（proprety）：选择符的样式的属性，如颜色、大小、定位、浮动方式等。

3、值（value）：是指属性的值。

4、同时可以为一个选择符定义多个属性，每个属性之间用分号隔开。

CSS选择符类型

1. 类型选择符就是HTML中的元素[作用于HTML标记]如：p{属性：值}

2.类选择符：可以自己定义样式，应用于一个或多个网页元素，类在网页中可以出现多次，用于定义重复的样式。类以英文“.开头”，后面的名字自己定义，类定义后还需要在网页中加入class=类名称，加以调用。如 .warning{属性：值}<p class=”warning”></p>

3.ID选择符：与类基本相似，只是以英文#开头因为id具有唯一性，所以，在网页中只能出现一次，，用于定义只出现一次的样式。如：#main{属性：值}<p id=”main”>…</p>`

CSS在网页中的应用方式

三、网页中加CSS的方式有四种

1.内联式样式表：直接写在现有的标记中，如：<p style=”color:red”>这里的文字颜色是红色的</p>

2.嵌入式样式表：使用<stlye></style>标签嵌入到HTML文件中的头部<head>标记内如：

<!--

Body{font-size:12px;}

-->

</style>

用于注释内容

3.外部链接式样式表：将样式表写在一个独立的.CSS文件中，然后在页面head区标记内用<link>标记调用它，如：<link href=”main.css” rel=”stylesheet” type=”text/css”/>

4.导入式样式表:导入式样式表于链接式样式表的工能基本相同，只是语法和动作上略有不同，

同样将导入样式代码写在<head>标记内。如：

<style>

@import url(”basic.css”);

</style>

CSS样式的优先权

四种方式的优先权：内联式[行内样式]->内嵌式[内部式]->链接式[外部式]->@import导入式

选择符优先权：行内->id选择符->类选择符->类型选择符【html标记选择符】

可以用!important语法来提升重要性【优先权】例：

background-color:#FFCCCC !important;IE6不支持

background-color：#66CCCC;

}

继承和层叠

CSS的长度单位：

相对长度单位	说明
em	相对于当前对象内文本的字体尺寸(倍)1.5em、2em
px	像素（pixel）推荐使用
绝对长度单位，说明--------基本上用不到
in	英寸
cm	厘米
mm	毫米
pt	点（point）

CSS的颜色单位：十六进制：如color:#ff0000 颜色名称：如color:red 三原色单位：如rgb(255,0,0),最常用的是十六进制。

CSS控制字体

功能	语法
设置字号	font-size:12px;
设置字体	color:#00000
设置字色	font-family:”黑体”
设置行高	line-height:150% line-height:1.5em
设置字体的粗细	Font-weight:normal[正常]bold[粗体]

注：1.如果是12px，14px行高，设置为1.5~1.8之间，字号越大，行高越小。

2.要使区中的内容垂直居中，将区块的行高设置与区块的高度相同。

设置字体样式	font-style:normal[正常]italic[斜体]oblique[斜体]
修饰文字	text-decoration:none[正常]underline[下划线]overline[上划线] line-throungh[删除线]
字符间距	letter-spacing:none[默认]length[长度单位]
单词间距	word-spacing:normal[默认]length[长度单位]

CSS控制文本

功能	语法
设置对象中文本缩进	text-indent:length text-indent:2em
设置水平对齐方式	text-align:left[左]center[中]right[又]
对象中空白处理	white-space:none[自动换行]pre[换行和空白受保护] nowrap[强制在同一行显示]
文本大小控制	text-transform:none[正常大小]，capitalize[每个单词的首字母转换成大写]uppercase[转换成大写]lopwer[转换成小写]
元素的垂直对齐方式	vertical-align:sub[设置为下标]super[设置文字为上标]top [把元素的顶端于最高元素的顶端对齐]text-bottom[把元素的底端于父元素字体的底端对齐]

CSS控制列表

功能	语法
列表属性	list-style: list-style-type list-style-position list-style-image
列表项目类型	list-style-type: none[无符号]disc[实心方块]decimal[1,2,3..] lower -roman[ⅰ,ⅱ,ⅲ]upper-roman[Ⅰ,Ⅱ,Ⅲ]lower-alpha[a,b,c] upper-alpha[A,B,C]
列表项目位置	list-style-position:inside[列表项目右移]outside[列表项目正常显示]
列表项目图片	list-style-image:url [list-style-image:url(lmk.gif)]none不会显示任何图像