当前位置:Gxlcms > html代码 > css知识点整理

css知识点整理

时间:2021-07-01 10:21:17 帮助过:37人阅读

  CSS是Cascading Style Sheets的简称,中文称为层叠样式表,用来控制网页数据的表现,可以使网页的表现与数据内容分离。

一、css引入的方式

  1、行内样式:行内式是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势,不推荐使用。

  2、嵌入式:嵌入式是将CSS样式集中写在网页的标签对的标签对中。格式如下:

    

  

  

  

  3、导入式:将一个独立的.css文件引入HTML文件中,导入式使用CSS规则引入外部CSS文件,

  4、链接式:也是将一个.css文件引入到HTML文件中

  注意:导入式会在整个网页装载完后再装载CSS文件,因此这就导致了一个问题,如果网页比较大则会儿出现先显示无样式的页面,闪烁一下之后,再出现网页的样式。这

  是导入式固有的一个缺陷。使用链接式时与导入式不同的是它会以网页文件主体装载前装载CSS文件,因此显示出来的网页从一开始就是带样式的效果的,它不会象导入式那样

  先显示无样式的网页,然后再显示有样式的网页,这是链接式的优点。

  二、css的选择器

  “选择器”指明了{}中的“样式”的作用对象,也就是“样式”作用于网页中的哪些元素

  1、基础选择器:

  * : 通用元素选择器,匹配任何元素 * { margin:0; padding:0; }

  E : 标签选择器,匹配所有使用E标签的元素p { color:green; }

  .info和E.info: class选择器,匹配所有class属性中包含info的元素 .info { background:#ff0; } p.info { background:blue; }

  #info和E#info id选择器,匹配所有id属性等于footer的元素 #info { background:#ff0; } p#info { background:#ff0; }

  2、组合选择器:  

 E,F 多元素选择器,同时匹配所有E元素或F元素,E和F之间用逗号分隔 Div,p { color:#f00; }

E F 后代元素选择器,匹配所有属于E元素后代的F元素,E和F之间用空格分隔 #nav li { display:inline; } li a { font-weight:bold; }

E > F 子元素选择器,匹配所有E元素的子元素F div > strong { color:#f00; }

  E + F 毗邻元素选择器,匹配所有紧随E元素之后的同级元素F p + p { color:#f00; }

  注意嵌套规则: 

  1. 块级元素可以包含内联元素或某些块级元素,但内联元素不能包含块级元素,它只能包含其它内联元素。
  2. 块级元素不能放在p里面
  3. 有几个特殊的块级元素只能包含内联元素,不能包含块级元素。如h1,h2,h3,h4,h5,h6,p,dt
  4. li内可以包含div
  5. 块级元素与块级元素并列、内联元素与内联元素并列。(错误的:

  3、属性选择器

  E[att] 匹配所有具有att属性的E元素,不考虑它的值。

(注意:E在此处可以省略,比如“[cheacked]”。以下同。) p[title] { color:#f00; }

E[att=val] 匹配所有att属性等于“val”的E元素 div[class=”error”] { color:#f00; }

E[att~=val] 匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素 td[class~=”name”] { color:#f00; }

E[att|=val] 匹配所有att属性具有多个连字号分隔(hyphen-separated)的值、其中一个值以“val”开头的E元素,主要用于lang属性,

比如“en”、“en-us”、“en-gb”等等 p[lang|=en] { color:#f00; }

E[attr^=val] 匹配属性值以指定值开头的每个元素 div[class^="test"]{background:#ffff00;}

E[attr$=val] 匹配属性值以指定值结尾的每个元素 div[class$="test"]{background:#ffff00;}

E[attr*=val] 匹配属性值中包含指定值的每个元素 div[class*="test"]{background:#ffff00;}

p:before 在每个

元素的内容之前插入内容 p:before{content:"hello";color:red}

p:after 在每个

元素的内容之前插入内容 p:after{ content:"hello";color:red}

  4、伪类选择器

  

伪类选择器: 专用于控制链接的显示效果,伪类选择器:

a:link(没有接触过的链接),用于定义了链接的常规状态。

a:hover(鼠标放在链接上的状态),用于产生视觉效果。

a:visited(访问过的链接),用于阅读文章,能清楚的判断已经访问过的链接。

a:active(在链接上按下鼠标时的状态),用于表现鼠标按下时的链接状态。

伪类选择器 : 伪类指的是标签的不同状态:

a ==> 点过状态 没有点过的状态 鼠标悬浮状态 激活状态

  a:link {color: #FF0000} /* 未访问的链接 */

  a:visited {color: #00FF00} /* 已访问的链接 */

  a:hover {color: #FF00FF} /* 鼠标移动到链接上 */

  a:active {color: #0000FF} /* 选定的链接 */ 格式: 标签:伪类名称{ css代码; }

  三、css常用属性

  1、颜色属性 

  

ppppp

  

ppppp

  

ppppp

  

ppppp

  2、字体属性 

  font-size: 20px/50%/larger

  font-family:'Lucida Bright'

  font-weight: lighter/bold/border/

  

老男孩

  3、背景属性

  

  background-color: cornflowerblue

  background-image: url('1.jpg');

  background-repeat: no-repeat;(repeat:平铺满)

  background-position: right top(20px 20px);(横向:left center right)(纵向:top center bottom)

简写:

注意:如果讲背景属性加在body上,要记得给body加上一个height,否则结果异常,这是因为body为空,无法撑起背景图片,另外,如果此时要设置一个

width=100px,你也看不出效果,除非你设置出html。

 1 
 2 "en">
 3 
 4     "UTF-8">
 5     Title
 6     
20 
21 
View Code

  4、文本属性

  

   white-space: 设置元素中空白的处理方式

  • normal:默认处理方式。
  • pre:保留空格,当文字超出边界时不换行
  • nowrap:不保留空格,强制在同一行内显示所有文本,直到文本结束或者碰到br标签
  • pre-wrap:保留空格,当文字碰到边界时换行
  • pre-line:不保留空格,保留文字的换行,当文字碰到边界时换行

  direction: 规定文本的方向

  • ltr 默认,文本方向从左到右。
  • rtl 文本方向从右到左。

  text-align: 文本的水平对齐方式

  • left
  • center
  • right

  line-height: 文本行高

  • normal 默认

  vertical-align: 文本所在行高的垂直对齐方式

  • baseline 默认
  • sub 垂直对齐文本的下标,和标签一样的效果
  • super 垂直对齐文本的上标,和标签一样的效果
  • top 对象的顶端与所在容器的顶端对齐
  • text-top 对象的顶端与所在行文字顶端对齐
  • middle 元素对象基于基线垂直对齐
  • bottom 对象的底端与所在行的文字底部对齐
  • text-bottom 对象的底端与所在行文字的底端对齐

  text-indent: 文本缩进

  letter-spacing: 添加字母之间的空白

  word-spacing: 添加每个单词之间的空白

  text-transform: 属性控制文本的大小写

  • capitalize 文本中的每个单词以大写字母开头。
  • uppercase 定义仅有大写字母。
  • lowercase 定义仅有小写字母。

  text-overflow: 文本溢出样式

  • clip 修剪文本。
  • ellipsis 显示省略符号...来代表被修剪的文本。
  • string 使用给定的字符串来代表被修剪的文本。
  • text-decoration: 文本的装饰
    • none 默认。
    • underline 下划线。
    • overline 上划线。
    • line-through 中线。

    text-shadow:文本阴影

    • 第一个参数是左右位置
    • 第二个参数是上下位置
    • 第三个参数是虚化效果
    • 第四个参数是颜色
    • text-shadow: 5px 5px 5px #888;

    word-wrap:自动换行

    • word-wrap: break-word;

  

  5. 列表属性

  list-style-type: 列表项标志的类型

  • none 去除标志
  • decimal-leading-zero; 02.
  • square; 方框
  • circle; 空心圆
  • upper-alph; & disc; 实心圆

  list-style-image:将图象设置为列表项标志

  list-style-position:列表项标志的位置

  • inside
  • outside

   list-style:缩写

  

 6. 边框

  border-style:边框样式

  • solid 默认,实线
  • double 双线
  • dotted 点状线条
  • dashed 虚线

   border-color:边框颜色

  border-width:边框宽度

    border-radius:圆角

  • 1个参数:四个角都应用
  • 2个参数:第一个参数应用于 左上、右下;第二个参数应用于 左下、右上
  • 3个参数:第一个参数应用于 左上;第二个参数应用于 左下、右上;第三个参数应用于右下
  • 4个参数:左上、右上、右下、左下(顺时针)

  border: 简写

  • border: 2px yellow solid;

   box-shadow:边框阴影

  • 第一个参数是左右位置
  • 第二个参数是上下位置
  • 第三个参数是虚化效果
  • 第四个参数是颜色
  • box-shadow: 10px 10px 5px #888;

  

  7、display

    • none 不显示。
    • block 显示为块级元素。
    • inline 显示为内联元素。
    • inline-block 行内块元素(会保持块元素的高宽)。
    • list-item 显示为列表元素。

  8、盒子模型

  什么是盒子模型?

  

  padding:用于控制内容与边框之间的距离;

  margin: 用于控制元素与元素之间的距离;

  

  一个参数,应用于四边。

  两个参数,第一个用于上、下,第二个用于左、右。

  三个参数,第一个用于上,第二个用于左、右,第三个用于下

  边框在默认情况下会定位于浏览器窗口的左上角,但是并没有紧贴着浏览器的窗口的边框,这是因为body本身也是一个盒子(外层还有html),解决办法

  

1 body {
2     margin: 0;
3 }
View Code

  9、float

  

  让一行显示两个块级标签,会脱离文档流

  • none
  • left 左浮动
  • right 右浮动

  clear 清除浮动:

  • none : 默认值。允许两边都可以有浮动对象
  • left : 不允许左边有浮动对象
  • right : 不允许右边有浮动对象
  • both : 不允许两边有浮动对象

 10、position

  

  1 static,默认值 static:无特殊定位,对象遵循正常文档流。

top,right,bottom,left等属性不 会被应用。 说到这里我们不得不提一下一个定义——文档流,文档流其实就是文档的输出顺序, 也就是我们通常看到的由左 到右、由

  上而下的输出形式,在网页中每个元素都是按照这个顺序进行排序和显示的,而float和position两个属性可以将元素从文档流脱离出来显示。 默认值就 是让元素继续按照

  文档流显示,不作出任何改变。

  2 position:relative

relative:对象遵循正常文档流,但将依据top,right,bottom,left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。

absolute:对象脱离正常文档流,使用top,right,bottom,left等属性进行绝对定位。而其层叠通过z-index属性定义。 如果设定 position:relative,就可以使用

  top,bottom,left和 right 来相对于元素在文档中应该出现的位置来移动这个元素。[意思是元素实际上依然占据文档 中的原有位置,只是视觉上相对于它在文档中的原有位置

  移动了] 当指定 position:absolute 时,元素就脱离了文档[即在文档中已经不占据位置了],可以准确的按照设置的 top,bottom,left 和 right 来定位了。 如果一个元素绝对

  定位后,其参照物是以离自身最近元素是否设置了相对定位,如果有设置将以离自己最近元素定位,如果没有将往其祖先元素寻找相对定位元素, 一直找到html为止。

  3 position:fixed

在理论上,被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标,不论窗口是否滚动,它都会固定在这个位置。

  fixed:对象脱离正常文档流,使用top,right,bottom,left等属性以窗口为参考点进行定位,当出现滚动条时,对象不会随着滚动。而其层叠通过z-index属性 定

  义。 注

  意点: 一个元素若设置了 position:absolute | fixed; 则该元素就不能设置float。这 是一个常识性的知识点,因为这是两个不同的流,一个是浮动流, 另一个是“定位

  流”。但是 relative 却可以。因为它原本所占的空间仍然占据文档流。

  


  通过以下四种属性进行定位:
  

  • left
  • top
  • right
  • bottom
  • z-index

 

人气教程排行