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 多余的文字会被省略号代替。