苏州NIIT学习笔记-CSS

1、样式表的分类

行内样式:用style属性写在标签内部的,影响的就是这一个标签

内嵌样式:写在head标签中的,影响的就是整个html文档

外部样式表:单独写一个文件,通过link标签导入到html文档,所有导入的html都受影响

如果几种样式定义有冲突,浏览器会选择听从离得最近的样式。

2、选择器:

类选择器和id选择器的名字不能由数字开头,只能包含数字、字母、下划线_;名字最好不要起跟标签一样的。
ID选择器的优先级高于类选择器。
一个标签中可以选择多个类

a、标签选择器

  1. h1{}
  2. p{}
  3. a{}

    b、类选择器

    起一个有意义的名字。
  • .menu_top{}
  • .nav_left{}
    1
    <h1 class="menu_top"></h1>

c、ID选择器 起一个有意义的名字,不要多个标签用同一个id

1
2
#nav{}
<h1 id="nav"></h1>

d、后代选择器

  • div a{} div标签中的a标签的样式
  • .d1 span{} class=”d1”的标签中span标签的样式

    e、子选择器

  • div>a{} div的下一层如果是a标签的样式

    f、属性选择器

  • input[disabled]{} input标签中有disabled属性的标签的样式
  • input[type=text]{} input标签中type=text的标签的样式

3、字体属性

  • color:字体颜色
  • font-family:字体名字
  • font-size:字体大小 单位有% pt px em
  • font-style:字体样式 斜体/正常
  • font-weight:字体加粗/正常
  • text-decoration :字体加下划线/上划线/贯穿线/无线
  • line-height:行高,可以设置字体垂直方向居中显示
  • letter-spacing:设置字符间距

4、文本属性

  • text-indent:首字缩进
  • vertical-align:在本行的垂直位置
  • text-align:水平方向的位置 left(默认) center right
  • direction : ltr | rtl 文字方向
  • white-space: nowrap 是否换行

5、背景

  • background-color:设置背景色,背景色有红绿蓝三原色组成 rgb 00-FF
  • background-image:背景图片 默认水平和竖直方向自动平铺。
  • background-repeat:设置背景图片的平铺方式
  • background-attachment:fixed:设置背景图片是否随着滚动条滚动
  • background-position: left top; 设置背景图片的起始位置 left距离左边距,top距离上边距,可以是负值
  • background : background-color || background-image || background-repeat || background-attachment || background-position

6、列表

针对ol和ul

  • list-style-type:修改标记的,可以实现olul的切换 用得最多的是none
  • list-style-image:标记设置成图片
  • list-style-position:inside:设置标记在li中/外
  • list-style : list-style-image || list-style-position || list-style-type

7、框模型

7.1 边框 border

1
2
3
4
border-color:#00C;
border-width:5px;
border-style:solid
/* 要想显示边框,一定要颜色、宽度、样式都设置齐了才能出来边框。 */
  • border-top : border-width || border-style || border-color 设置上边框
  • border-right : border-width || border-style || border-color 设置右边框
  • border-bottom : border-width || border-style || border-color 设置下边框
  • border-left : border-width || border-style || border-color 设置左边框
  • border : border-width || border-style || border-color 设置所有边框
  • border-collapse:collapse 设置table的边框合并,要写在table标签中

7.2 内边距 padding

设置有可能会加大宽度、高度

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left
  • padding:可以设置多个方向的padding
    1
    2
    3
    4
    padding:50px; /*上下左右的padding都是50px*/
    padding:50px 20px;/*上下的padding是50px 左和右的padding是20px*/
    padding:50px 20px 10px;/*上是50px 左和右是20px,下是10px*/
    padding:50px 30px 20px 10px;/*上 右 下 左 从12点方向顺指针转动*/

7.3 外边距 margin

margin的合并功能:如果兄弟标签也有margin,那么会合并,不会相加

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left
  • margin:可以设置多个方向的margin
    1
    .d2{ margin:0 auto; }/*水平方向居中显示*/

8、布局

  • display:
  1. none隐藏 看不见了,自己的位置也腾出来了,占据的空间不复存在
  2. block:变成块框
  3. inline-block:变成行框
  4. inline:变成行内元素
  • visibility:
  1. visible 可见
  2. hidden 隐藏 虽然看不见,但是本身占据的空间还在
  • overflow:如果内容超出宽高,怎么处理的
  1. hidden:超出部分看不到
  2. visible:默认
  3. scroll:加滚动条
  4. auto:自动加滚动条
  • float:浮动 脱离文档流,父元素高度没撑开,后面的元素会继续浮动
  1. left:向左浮动
  2. right:向右浮动

一个行内元素一旦设置浮动,就会自动变成行框

  • clear:清除浮动效果

在浮动的元素后面加一个兄弟元素,写上clear:both

9、伪类

:link :visited :hover : active 超级链接的四种状态

  • 未访问 :link
  • 已访问 :visited
  • 鼠标悬停 :hover
  • 鼠标点击 :active

次序不可乱,否则没效果

10、伪元素

  • :first-letter 对第一个字设置样式
  • :first-line 对一行字设置样式

  • 与content一起使用的

  1. :before
  2. :after
    利用after清除浮动,想要清除浮动,必须要变成块框
    1
    2
    3
    4
    5
    .d4:after {
    content:"";
    clear:both;
    display:block;
    }

11、定位

position : static | absolute | fixed | relative

要与topbottomleftright合用

  • fixed:相对浏览器固定定位,不管滚动条 占据的空间不复存在
  • absolute: 如果父元素不是static,就会相对父元素移动,否则就会相对body移动。占据的空间不复存在
  • relative:相对于自己本来的位置定位,原来的空间还在
  • static : 默认的 什么效果都没有
  • z-index:垂直方向的次序 可以填数值

如果想要对父元素绝对定位,父元素必须要设置成position:relative

12、cursor:设置鼠标样式