css学习笔记

1.css意味层叠样式表。

2.css常用的方式有①内部样式表、②外部样式表、③ 内联样式表、④外部导入样式。(不推荐直接在行内标签属性值处添加style更改样式(内联样式),除非代码量很小。)

3.css的语法规范:

选择器{

  属性名1:属性值1;

  属性名2:属性值2;

}

4.常用选择器的使用

  1)id在css中的表示方式为#,id的属性值不能相同。

  2)class在css中的表示方式为 . 。

  3)标签选择器:直接写标签名。即选中范围内的所有同类型的标签。

  4)子代选择器:比如  .num>ul>li,选择器为>.。

  5)后来选择器:“空格”,直接空格。

  6)群组选择器:同等级多选择用,逗号隔开。

  7)通用选择器:*又叫通配符,选择所有的标签,权重最低。

5.常用选择器中的权重优先级

  1)id>class>*,!important:出现!important的修饰优先级最高。

  2)展示的最后样式以权重最高的为主。

6.常用的颜色表示方法:

  1)英文单词表示法,比如:white、black。

  2)十六进制表示法:以#开头的十六进制表示颜色,比如#15aafb,表示为淡蓝色。有缩写形式,比如#fff为白色,#eee为灰色。

  3)rgb表示法:用rgb模式表示颜色,拓展样式rbga表示法,例如rgba(11,11,11,0.5),a表示透明度。

7.伪类:

  1):hover,鼠标悬浮上去的表示效果。

  2):activ,鼠标点击激活对象的时候的显示效果。

  3):focus,鼠标选中对象的时候的显示效果。

8.css中其他一些常用属性及用途

  1)line-height:行高。设置文本垂直居中时候常用,将行高设置为盒子的高度相等的时候,内容垂直居中。

  2)margin:auto:设置自动左右居中。

  3)text-decretion:去除文本样式,常用在a标签,将a标签中的文本下划线去掉。

  4)list-style:none;:将li标签中的样式去掉(开头的小圆圈)。

  5)font-family:设置文字类型inherit为斜体,font-size大小,font-weight加粗。

  6)input中 outline:none;:为去掉input的边框。

  7)background-positon:定位背景图片。xy轴的调整,可以写在一行,也可以单独调整xy。

  8)background-repeat:设置背景图片是否平铺重复,常用为no-reapeat不重复。

  9)opacity:元素透明度的设置,在0-1之间。

  10)z-index:-1,调整图层的顺序。

9.盒子模型的理解:

      margin:为外边距,padding为内边距,border为边框,和里面的内容一起组成了盒子模型。任何一个元素都是盒子模型,

      盒子模型的大小不仅仅是内容大小,也要包括内边距、外边距、边框、和内容。一般调整的样式为 例如:margin:10px 10px 10px 10px;

    顺序为上右下左顺时针顺序,也可以单独调整。

10.定位:position:属性值{

      top:10px;

      left:10px

}

  1)相对定位,属性值为relative,以盒子当前位置为坐标开始调整。

  2)绝对定位:absolute,以网页为坐标调整位置。

  3)固定定位:fix,固定在网页的特定位置,常用语小广告,悬浮窗口等等。
  4)定位也会使元素脱离文档流。

11.浮动:脱离文档流。

  1)float:right右浮动,元素从右向左依次排列,反向浮动。

  2)float:left左浮动,从左向右依次排列正向浮动。

12.框架(不常用):

<frameset rows="30%,70%" />

  <body><frameset>只能有一个。

13.css中的边框设置:

  1)boder :1px  solid black;意为一像素大小的黑色实现边框。

  2)边框的圆角:border-radius:3px  意为3像素大小的圆角。

14.阴影:

  倒影:box-shadow:x y  厚度   颜色 ;

15.在计算机中坐标与我们数学中常用坐标不相同,y轴的正方向在下面。

16.clear:both清除浮动带来的影响。

17.关于浮动:元素一旦浮动以后就会变成行内块元素,除了清楚浮动可以清楚浮动带来的影响,第二种方法是设置盒子在父元素的高度。

18.使元素消失的两个办法:

  1)display:none 下方元素自动补上。

  2)visibility,保留位置不会自动补上。

19.鼠标形状的改变:       cursor:pointer  鼠标指针放上去的时候变成手的形状,常用在可以点击的a标签或者按钮。

20.改变元素的性质:

  将元素设置成块级元素:   display:block

  将元素设置为行内块级元素:  dispaly:line-block

  将元素设置为行内元素的:   display : line

  块级元素可以设置宽高,行内元素不用单独占一行,详情分类见HTML的笔记,视情况转换元素的类型。

21.解决文字溢出的问题(文字输入的限制):overflow

  (设置宽高的情况下 文字太长溢出)

  属性值

  1)hidden  溢出部分被裁剪,并且不可见。

  2)auto  被裁剪,出现滚动条。

  3)scroll 也出现滚动条,在不溢出的情况下也会有滚动条。

  4)inherit  内容不会被裁剪。

   5) ellipis  多余的文字会被省略号代替。

原文地址:https://www.cnblogs.com/wangzheng98/p/10827914.html