软件开发技术分享
0%

苏州NIIT学习笔记-CSS

发表于 分类于
本文字数： 3.2k 阅读时长 ≈ 3 分钟

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：修改标记的，可以实现ol和ul的切换 用得最多的是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

** 要与top或bottom、left或right合用 **

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

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

12、cursor：设置鼠标样式

相关文章