css基础知识总结_IT分享知识网

大家好，欢迎来到IT知识分享网。

1.什么是css

2.css语法

比如 selector{property：value}

比如 h1{color:red; font-size:14px;} h1是选择器，color和font-size是属性，red和14px是值。

 h1,h2,h3,h4,h5,h6 { color: green; }

body { font-family: Verdana, sans-serif; }

3 创建CSS

<head> <style type="text/CSS"> 选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;} div{width:200px; height:200px; border:1px solid red;} </style> </head>

<div style="width:200px;height:100px;border:1px solid black;"></div>

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

行内样式表：优点书写方便；缺点没有实现样式和结构相分离；使用情况较少；控制范围控制一个标签(少)。

内部样式表：优点部分结构和样式相分离；缺点没有彻底分；使用情况较多；控制范围控制一个页面(中)。

外部样式表：优点完全实现结构和样式相分离；缺点需要引入；使用情况最多，推荐；控制范围控制整个站点(多)。

4 id和class选择器

ID选择器：

HTML元素以 id 属性来设置 id 选择器，CSS 中 id 选择器以 “#” 来定义。注意： id 属性不能以数字开头。

语法： #id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

class 可以在多个元素中使用，并且一个元素也可以指定多个类名。

在 CSS 中，类选择器以一个点 “.” 号来定义。

同样的类名的第一个字符也不能使用数字。

语法： .类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

都可以应用于任何元素

不同点：

ID 选择器只能在文档中使用一次，而类选择器可以使用多次。
可以使用类选择器词列表方法为一个元素同时设置多个样式(也就是一个元素可以制定多个类名)，而ID只能指定一个。

5 CSS元素选择器

最常见的CSS选择器就是元素选择器，也就是标签选择器，也就是在HTML中元素的最基本的选择器。

语法： 标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 或者 元素名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

6 CSS背景(background)

background-color 背景颜色 background-image 背景图像 background-repeat 背景图像设置水平或垂直平铺或不平铺 background-position 背景图像设置定位 background-attachment 背景图像设置固定或滚动  背景属性简写： body{ background:green url('images/fix.gif') no-repeat fixed 12px 24px; } 当使用简写属性时，属性值的顺序依次为： background-color --> background-image --> background-repeat --> background-attachment --> background-position

7 CSS外观属性

主要是用来删除超链接的下划线，也可以使用其他值来设置文本的修饰；

text-decoration:overline，设置文本上划线。

text-decoration:line-through; 设置文本中间划线。

其中 x 是水平阴影的偏移值，

y 是垂直阴影的偏移值，

shadow 用于指定阴影的模糊值，即模糊效果的作用距离，不允许负值。

text-align:justify 是设置内容根据宽度自动调整字间距，使各行的长度恰好相等，实现文本两端对齐效果，

8 CSS字体 (font)

font 属性可用于设置文本字体，定义样式，如加粗，大小等，属于复合属性，也叫做简写属性。

使用px设置：通过像素设置文本大小是设置的整个页面。
使用em设置：1em等于当前的字体尺寸，比如设置的默认字体是12px，因此1em的默认大小就是12px。像素转换em：px/12 = em
使用%和em组合设置：在所有浏览器的解决方案中，设置 <body> 元素的默认字体大小是 100%，可以显示相同的文本大小，并允许所有浏览器缩放文本的大小。

<head> <style> body{font-size:100%} p{font-size:2.5em; } /* 2.5*16=40px */ </style> </head> <body> <p>使用%和em组合设置</p> </body>

normal正常显示文本
italic 定义斜体
oblique 定义倾斜的文字

9 CSS链接

链接的四种状态是：

a:link - 正常，未访问过的链接。 a:visited - 已访问过的链接。 a:hover - 当鼠标滑动到链接上时。 a:active - 链接被点击的那一刻。

10 CSS列表

无序列表：
无序列表经常用来做导航栏菜单，通常都需要隐藏无序列表项的标记，那么就使用 list-style-type:none，表示无标记。
list-style-type 属性的默认值为 disc 实心圆，即小黑点。除了无标记还可以修改标记，例如circle空心圆，square实心方块。
有序列表：
有序列表项标记默认使用数字样式显示，即 list-style-type:decimal。
图像作为列表项标记
要指定列表项标记的图像，可以使用 list-style-image 属性，只需要简单地设置一个 url() 值，就可以将图像作为标记类型。
列表属性简写：list-style：list-style-type，list-style-position，list-style-image;

11 CSS表格

<head> <style> #tab{ width:50%; font-family:"微软雅黑"; /*设置是否将表格边框合并为单一线条的边框*/ border-collapse:collapse; } #tab th,#tab td{ /*表格边框*/ border:1px solid #7AC942; /*表格内边距*/ padding:5px 10px; } #tab th{ color:white; background-color:#9C3; font-size:1.125em; /*左对齐*/ text-align:left; padding-top:4px; padding-bottom:8px; } #tab .list td{ /*边颜色*/ color:#000; /*背景颜色*/ background-color:#FFC; } caption{ margin-bottom:10px; font-weight:bold; } </style> </head> <body> <table id="tab"> <caption>食物类别</caption> <thead> <tr class="list"> <th>粗粮</th> <th>蔬菜</th> <th>水果</th> </tr> </thead> <tbody> <tr> <td>大豆</td> <td>黄瓜</td> <td>香蕉</td> </tr> <tr class="list"> <td>高粱</td> <td>菠菜</td> <td>柠檬</td> </tr> <tr class="list"> <td>燕麦片</td> <td>白菜</td> <td>西瓜</td> </tr> </tbody> </table> </body>

12 CSS 选择器

1 分组和嵌套选择器

分组选择器

例如：h1{color:gray;} p{color:gray;} 可以写成：h1, p{color:gray;}

嵌套选择器，例如：

.div1 p{ color:white; } .div1 p a{ color:yellow; font-weight:bold; } <div class="div1"> <p>嵌套选择器 <a href="#">深层嵌套选择器</a> </p> </div>

通配符选择器

*{ padding:0; margin:0; }

属性选择器：属性选择器使用[attr] ；例如：把所有带有 title 属性的元素的字体设置为红色

<head> <style> [title]{ color:red; } </style> </head> <body> <h1>h1 标题不带有 title 属性</h1> <h2 title="标题">h2 可以设置样式</h2> <a href="#" title="链接">超链接可以设置样式</a> </body>

属性和值选择器：属性选择器使用[attr=value]

<head> <style> [title=Hello]{ color:blue; } </style> </head> <body> <h1 title="Hello world">h1 标题 title="Hello world"</h1> <h2 title="Hello">h2 可以设置样式</h2> <a href="#" title="Hello">超链接可以设置样式</a> </body>

属性和多个值的选择器：使用有两种情况：属性值用空格分隔使用：[attr~=value]；属性值用连字符分隔则使用：[attr|=value]
例如：把包含 title=’Hello’ 的元素的字体设置为绿色，使用 ~ 分隔属性和值

<head> <style> [title~=Hello]{ color:green; } [lang|=zh]{ color:gray; } </style> </head> <body> <h1 title="world">h1 标题 title="world"</h1> <h2 title="Hello">h2 可以设置样式</h2> <h3 title="Hello Web">h3 可以设置样式</h2> <a href="#" title="Hello world">超链接可以设置样式</a> <a href="#" lang="zh-TW">超链接可以设置样式</a> </body>

表单样式：属性选择器在为不带有 class 或 id 的表单设置样式时特别有用。例如：

<head> <style> input[type="text"]{ width:150px; display:block; margin-bottom:5px; background-color:yellow; } input[type="button"]{ width:120px; margin-top:5px; background-color:green; } </style> </head> <body> <form name="input" action="demo.php" method="get"> 用户名：<input type="text" name="user" placeholder="请输入登录名"> 昵　称：<input type="text" name="name" placeholder="请输入角色名"> <input type="button" value="查询"> </form> </body>

后代选则器:又称为包含选择器，以空格分隔，子元素选择器只能选择作为某元素子元素的元素。
子元素选择器:子元素选择器只能选择作为某元素子元素的元素，以 > 分隔，子元素选择器只能选择作为某元素子元素的元素。
相邻兄弟选择器：可选择紧接在另一元素后的元素，且二者有相同父元素，以 + 分隔。
普通相邻兄弟选择器：选取所有指定元素的相邻兄弟元素，以 ~ 分隔。
选择器组合：多种选择器可以结合起来使用。

13 CSS伪类(不区分大小写)

CSS 伪类是用来向一些选择器添加特殊的效果。

语法：选择器:伪类{attr:value;}

在浏览器中，链接的不同状态都可以以不同的方式显示：

a:link{color:#FF0000;} /* 未访问的链接显示为红色 */ a:visited{color:#00FF00;} /* 已访问的链接显示为绿色 */ a:hover{color:#FF00FF;} /* 鼠标划过链接显示为紫红色 */ a:active{color:#0000FF;} /* 已选中的链接显示为蓝色 */

<body> <p>第一个 p 元素</p> <p>第二个 p 元素</p> <p>第三个 p 元素</p> </body>

html:lang(zh-CN){
    color:blue;
}

:lang(en)>p{
    color:gray;
}

14 CSS 伪元素

CSS 伪元素是用来为一些选择器添加特殊的效果。

语法：选择器:伪元素{attr:value;}

h1:before{ content:url(images/logo.gif); }

h1:after{ content:url(images/logo.gif); }

content:none 该值是默认值，不插入内容。
content:”string” 插入文本。
content:attr(属性) 插入标签属性值。
content:url(路径) 使用指定的绝对或相对地址插入一个外部资源，可以是图像，音频，视频或浏览器支持的其他任何资源。

15 块级元素和行内元素

块级元素(block-level)：每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。

总是从新行开始
高度，行高，外边距以及内边距都是可以控制的
宽度默认是容器的100%
可以容纳内联元素和其他块元素

和相邻行内元素在一行上。
高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。
默认宽度就是它本身内容的宽度。
行内元素只能容纳文本或则其他行内元素。（a特殊）
注意：
1.只有文字才能组成段落，因此p里面不能放块级元素，同理还有这些标签h1,h2,h3,h4,h5,h6,dt，他们都是文字类块级标签，里面不能放其他块级元素。
2. 链接里面不能再放链接。

16 行内块元素(inline-block)

和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。
默认宽度就是它本身内容的宽度。
高度，行高、外边距以及内边距都可以控制。

17 CSS 三大特性

层叠、继承、优先级
CSS层叠性：是指多种CSS样式的叠加。
CSS继承性：是指书写CSS样式表时，子标签会继承父标签的某些样式，如文本颜色和字号。

继承样式的权重为0。
行内样式优先。
权重相同时，CSS遵循就近原则。

18 盒子模型（CSS重点）

CSS三大模块：盒子模型、浮动、定位。
盒子模型：就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。

盒子边框（border）

语法：border : border-width || border-style || border-color 常用属性值：none：没有边框即忽略所有边框的宽度（默认值）、solid线(单实线)、dashed(虚线)、 dotted(点线)、double(双实线)

19 实现居中

1 外边距实现盒子居中
满足两个条件：

必须是块级元素。
盒子必须指定了宽度（width）
然后给元素左右的外边距都设置为auto。

例如：.header{ width:960px; margin:0 auto;}

文字水平居中是 text-align: center
盒子水平居中左右margin 改为 auto

20 盒子模型布局稳定性

margin 会有外边距合并还有 ie6下面margin 加倍的bug，所以最后使用。
padding 会影响盒子大小，需要进行加减计算（麻烦）其次使用。
width 没有问题，我们经常使用宽度剩余法高度剩余法来做。

21 盒子阴影

语法： box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内/外阴影；

22 浮动(float)

CSS的定位机制有3种：普通流（标准流）、浮动和定位。
浮动：是指设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指定位置的过程。
语法：选择器{float:属性值;} 属性值可以是left，right，both，none。
目的：为了让多个块级元素同一行上显示。

23 定位(position)

position 属性值分为四种：

static：自动定位（默认定位方式），所谓静态位置就是各个元素在HTML文档流中默认的位置。
relative：相对定位，相对定位是将元素相对于它在标准流中的位置进行定位
absolute：绝对定位，相对于其上一个已经定位的父元素进行定位
fixed：固定定位，相对于浏览器窗口进行定位。它的特点在于它的元素跟父亲没有任何关系，只认浏览器；完全脱标，不占有位置，不随着滚动条滚动。

叠放次序（z-index的特点：

z-index的默认属性值是0，取值越大，定位元素在层叠元素中越居上。
如果取值相同，则根据书写顺序，后来居上。
后面数字一定不能加单位。
只有相对定位，绝对定位，固定定位有此属性，其余标准流，浮动，静态定位都无此属性，亦不可指定此属性

免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://haidsoft.com/130233.html

css基础知识总结