css标签及属性

时间:2023-01-21 12:43:37

css标签及属性

HTML引入CSS的方法

1.嵌入式  <style type = “text/css”>要写的样式</style>

2.外联式  <link rel = “stylesheet”  type = “text/css”  href = “css/public.css”  />

3.行内式(主要用于JS控制元素的样式):style="color:red;"

九大选择器

1.通配符*{设置全局}     2.html标签选择器(多个标签时用,隔开);

3.id  #选择器;               4.class  选择器;(id,class声明是区分大小写的)

5.后代选择器(子子孙孙都选择) {选择器1  选择器2}

6.子选择器    选择器1>选择器2

7.相连兄弟 (同级相连的元素 一个) +

8.相连兄弟们(同级所有的元素) ~

9.伪类:link (未访问的样式) :visited 已访问的样式 :hover鼠标悬停的样式 :active 点击时的样式。

优先级:id> class > 标签

100   10   1(权重)  复合使用时,权重相加大的优先级高

font字体属性

font-size    字体大小

font-family  字体系列(宋体等)

font-weight  字体粗细  normal  bold   100~900   400=normal  700=bold

font-style   字体风格  normal  italic(倾斜)

font-variant 字体的变形  small-caps (小型大写字母)

font 简写(要求至少给出 字体大小/字体系列)      例如:font: 15px 微软雅黑;

font: [<字体加粗> | <字体风格> | <字体变形>] <字体大小>[/行高] <字体系列>  必须按顺序!!否则不会执行

background背景属性

background-color   背景颜色(三种方式,1.单词2.#fff000 3.rgb(255,255,255)4.rgba,a透明度(0-1)

background-image  背景图片 :url('./imgs...'); css引入文件,都是相对于css自己本身

background-repeat: 重复方式 no-repeat(不重复) | repeat-x | repeat-y | repeat
background-position  背景位置  (left center right  水平方向/// top  center bottom  垂直方向)
                                              例子: background-position:7px(X) -45px<Y>  浏览器为第四项限
background-attachment  背景固定  (fixed  固定  scroll默认滚动)
background-size    背景图片的尺寸 (像素 / % / cover 扩大至覆盖全部)
               长度单位:px,em(倍数);%     颜色单位:单词;进制;rgb;rgba(a是透明度,0是透明,1不透明)
background  简写  (无顺序,随便写)

文本属性

letter-spacing    字间距  px         color:颜色                            

word-spacing    词间距  px    (只对有空格的起作用)

text-indent       首行缩进 px

text-align        文字对齐 left  right center

line-height       行高  px  em  % (每行的间距)以字的中间为基线,是基线与间的距离

text-decoration   文字修饰(underline 下划线  /  overline 上划线 / line-through 删除线 / none 隐藏下划线)

text-shadow      文字阴影(:5px 5px 5px #f00;    水平阴影位置   垂直阴影位置    模糊距离   阴影的颜色)

white-space:nowrap 强制不换行
word-wrap:break-word;word-break:normal 自动换行
(用边框属性绘制三角形,边框本质是梯形)

边框属性

border-width     边框四边的宽度 px

border-style      边框的样式 solid (单线)double(双线) dashed(虚线)

border-color      边框颜色

单独设置某条边的边框  需要加入-top 等关键字

border  简写形式   border:width style color;           例子:border: 1px solid #666

box-shadow   边框阴影  水平位置x / 垂直位置y / 模糊距离10px/阴影大小10px / 阴影颜色

border-radius  边框圆角        px / %

border-collapse: collapse; 合并表格内外边距

列表属性

list-style-type     设置列表的格式为none.也就是没有格式.

list-style            列表样式类型 none(无样式) 去列表的点

                     disc(默认值 实心点)             circle 圆圈           decimal 数字
                     lower-roman 小写罗马..等

list-style-position   列表样式位置          inside(在内)  outside(在外) 比如说圆点或者方点

list-style-image    列表样式图片  :url('./....');

盒子模型

1.盒子模型的组成:  width  宽   /  height高 / padding内边距 /  border边框/ margin  外边距 {(left  top right  bottom可以控制单独的边} 例;margin-top:10px;
margin:上下左右                margin:上 左右 下               margin:上 右 下 左
2.浮动布局: float  浮动(left  right )   clear 清除浮动(left  right  both   清除两侧浮动) {清除浮动才会把盒子撑起来}
2.1第二种清除浮动:  .父元素标签::before, .父元素标签::after{content: '';display: table;}
                                     .父元素标签::after{clear: both;}
               
3.position  定位:absolute  绝对定位  (以父元素为基点,脱离文档流不保留位置)
                                relative   相对定位(不脱离文档流,保留位置)   / fixed      固定定位(网页广告)                        (这些都是非静态定位)                  
                                z-index   决定元素层的显示顺序(值越大,越在顶层显示.)
4.布局相关的属性:
               4.1 display (规定如何显示,可以进行块与行的转化)
                   none(隐藏)、block(以块元素显示)、inline(以行内元素显示) 
                   inline-block   以行级块元素的特点显示
               4.2 visibility  (规定元素是否可见)
                  :visible  可见,默认值  / hidden   隐藏 占位 /  inherit  继承 子元素默认
 
               4.3 overflow  (溢出的内容该如何显示)
                  visible(可见)、hidden(隐藏)、scroll(出现滚动条)、auto(超出自动显示滚动条)
                  overflow:hidden(可用于清除浮动,在父元素中使用)
               4.4 cursor:(网页中光标的类型)  pointer(手形),text(文本),help(帮助),wait(等待),
 
5.特殊元素(内联块状元素/行内元素/内联元素...)    1.和其他元素都在一行之上   2.高/宽/行高/上下边距  都可以设置
 
布局技巧:
多盒浮动:1.父元素用相对定位,子元素用绝对定位
                  2.算好子元素的位置,让超出父元素的部分隐藏
                  3.当鼠标放上去时,所有距离移动过来
鼠标方上:出现(小辣椒)
               父:width:220px;height:460px;position:absolute;left:234px;top:0px;display:none; 
               :hover{display:block;}
图片定位:
                 background:url('1.png') -381px -108px;} 
         .box1:hover{background-position:-247px -108px;}
               以左上角为基准(0,0),向右向下为XY正
图标字体:
               @font-face{font-family:'tbzt'; src:url('./zt/iconfont.ttf');}
               .font{font-family:'tbzt';}       

高级样式

transition(平滑过渡) : property (改变某个属性)

duration (转换过程的持续时间) (单位:s/ms)

timing-function(变换的速率)(ease逐渐变慢/ linear匀速/ease-in                              加速/ease-out 减速/ ease-in-out加速然后减速)

例:.box2:hover{background: orange;  transition:background 3s ease-out;}

transition: all .2s linear(平滑过渡)

transform(变形)  :(单位:deg 角度)     none (不变)

  1. rotate (旋转)   rotateX  rotateY

例:rotate(30deg) rotateX(30deg) rotateY(30deg)

.rotate{width:400px;margin:50px auto;transition:transform 0.5s linear; (把           transform当做属性值用)}

.rotate:hover{transform: rotate(60deg);}

  1. skew  (扭曲)

例:skew(30deg); skewX(30deg); skewY(30deg);

  1. scale(num) 中心缩放  -1,-2,1,2,... 放大(缩小)倍数 /scale(X,Y)

例:scale(1.5);  scale(2,1.5);

4.translate(移动)translateX / translateY / translate(X,Y)

例:translate(100px,20px)

5.matrix         矩阵变形

opacity: 0-1(透明-不透明);

两种渐变

1. background: -webkit-gradient(linear, 0 0, 0 100%, from(red), to(blue));

2. background-image:-webkit-gradient(

linear,  /* 渐变类型:线性渐变 */

10% 10%,  /* 分别对应X,Y 方向渐变起始位置 */

100% 100%,  /* 分别对应X,Y 方向渐变终止位置 */

color-stop(0.14, rgb(255,0,0)),   /* 渐变颜色位置,及颜色 */

color-stop(0.5, rgb(255,255,0)),  /* 渐变颜色位置,及颜色 */

color-stop(1, rgb(0,0,255))  /* 渐变颜色位置,及颜色 */);

 

动画属性

需要@keyframes 配合 animation一起来使用

Animation:

Animation-name:动画的名称

Animation-duration:执行动画的时间

Animation-timing-function:动画的类型,类型与过渡的类型。

Animation-delay:延迟时间

animation-iteration-count:执行动画的次数,infinite,无限次

animation-direction:执行方向,奇数次向右执行,偶数次向前执行

@keyframs 动画的名称{

       0%{

       属性

}

100%{

       属性

}

}

 

 

.div1:hover{              名字   时间 方式 延迟时间  次数  执行方向

animation: changcolor 3s ease 1s 2 alternate;

}

@keyframes changcolor{

0%{

background:green;

}

50%{

background:blue;

}

100%{

background:pink;

}

}

浮动

浮动了就不是块级元素了,不占一行。只是改变了文档流的显示,没有脱离文档流(块浮起来了,文字却依然在外面)。

网页的层次是:定位 >浮动 > 块级元素,定位在最高层。

1.不要给父元素设height(宽一般设置,因为具体布局时需要考虑尺寸),只要设置了,子元素是无法改变父元素设置好的宽高的。

2.父、子元素都浮动或者都不浮动,在第一条的前提下,都可以撑开父元素。

3.父元素浮动,子元素不浮动,可以撑开(但是子依然是块)。

4.父元素不浮动,子元素浮动,不可以撑开(虽然子元素还在父里,但一种是块,一种是浮动了,不属于同类)。要想撑开,必须清除浮动。

定位:绝对定位,脱离文档流,不保留位置,普通文档流其不存在;

绝对定位需要一个参照物,不然就是根据body的位置定位了;

相对定位,不脱离文档流,保留位置,它的参照物是自己,自己设置了position:relative这个属性,top,left才会生效(left: 10px;现在这块左边10px是原来的位置)

定位:只有父元素也定位,子元素定位才会相对父元素定位置,否则是相对页面定位,父 子元素可以一个相对一个绝对。

兼容性处理

l  全局CSS设置

l  常用兼容性技巧

l  CSS HACK

1、清除所有的标记的内外边距

body,ul,li,a,img,p,input{ margin:0; padding:0; }

2、去除项目符号或编号前面的符号

ul,ol,li{ list-style:none; }

3、全局链接效果

a:link , a:visited{color:#444;text-decoration:none;}

a:hover{color:red;}

4、网页中所有的文字大小颜色

body{ font-size:12px; font-family:宋体; color:#ccc; }

5、去除图片的链接边框线

img{border:0;}

6全局的类样式

@font-face{font-family:'dqz';src: url('iconfont.ttf');}(这是图形字体,需要加载)

.fone{font-family:'dqz'; }(在html里加class=“fone”就可以使用)

.fl{float:left;}

.fr{float:right;}

.cl{clear:both;}

.mt_10{margin-left:50px}

.bgr{background-color:red;}

.ccc{background-color:#ccc;}

常用的兼容性调试技巧

1、实现所有浏览器主页居中

Firefox下主页居中代码:.box{margin:0px auto}

IE5.5下主页居中代码:body{text-align:center;}

       将以上两种代码,合在一齐书写:

2、单行文本上下居中

h1{

height:30px;

line-height:30px;

}

3、在IE6下,左右margin会加倍,应该是IE6下的一个bug

提示:排版时,能使用padding解决的,坚决不用margin。如果实在想用的话,就使用其中一边。

解决的方案:使用 display:inline;

CSS HACK

针对不同浏览器,书写不同的CSS代码的过程,称为“CSS HACK”。

也就是说:写一个CSS代码,让IE6识别,其它浏览器不识别。

下面,针对不同浏览器,有几个符号:

这些符号是在CSS属性的前面加的,用于分辨不同的浏览器版本。

l  “*”IE6和IE7都识别。如:.box{ *background-color:red; }

l  “_”只有IE6识别。如:.box{ _background-color:green;}

使用CSSHACK来处理IE6下,左右margin加倍的问题

注意:CSSHACK不是W3C的标准,因此,我们尽量少用。如果你调试兼容性,调试不好时,可以偶尔用一下。

其他注意:

1.html代码前必须写<!DOCTYPE HTML>//否则ie margin:0 auto不会居中
2.解决ie文本框不垂直居中line-height后面加\9
               line-height:25px\9
3.CSS禁止Chrome谷歌浏览器激活输入框后自动添加橘黄色边框
               .className:focus{outline:none } || {outline:Blue Solid 4px;}
4.要使得子盒子位于父盒子处于绝对居中方案一(推荐):
               设置父盒子{position:realtive;}
               设置子盒子{margin:auto;postion:absolute;left:0;right:0;top:0;bottom:0;}

附录:

1.CSS Cascading Style Sheets 层叠样式表。CSS是给HTML标记加的样式;JS是给HTML标记加的行为。HTML标记是最先出现的

2.注意:id属性一般是给JS使用的,不是让你来加样式的。class属性只能给CSS用,不能给JS用的。

id选择器的名称,必须以“#”开头,后跟HTML标记的id属性的值。

3.浮动出现的意义其实只是用来让文字环绕图片而已,仅此而已.

4.list-style:none (去掉各种项目符号)  行高等于盒子高度(上下居中)

5.我们所说的width和height属性,它们指内容的宽度和高度,不含内、外边距、边框线。

6.浮动就是将块级元素霸占一行的特性取消,脱离原来的文本流。

7.CSS属性继承:外层元素的样式,会被内层元素进行继承。多个外层元素的样式,最终都会“叠加”到内层元素上。

8.cursor:网页中光标的类型,取值:text(文本)help(帮助)、wait(等待)、pointer(手形)等

10.上下两个块元素,如果每一个元素都指定了四个外边距,那么上下相邻的那个外边距会发生合并的现象,合并后取其中较大的外边距。

11.浮动的元素,不再占空间了,并且,浮动元素的层级要高于普通元素

12.CSS属性继承:外层元素的样式,会被内层元素进行继承。多个外层元素的样式,最终都会“叠加”到内层元素上。

13.单个选择器的优先级:行内样式 > id选择器 >  class选择器 > 标签选择器

14.同一个class属性,可以指定多个类名样式,多个类样式之间用空格隔开。

15.兼容性调试,主要调试IE8IE7IE6Firefox

 

补充

伪元素选择器

s1:firsh-child                        第一个子元素

s1:last-child                         最后一个子元素

s1:nth-child(num)                      匹配父元素的第n个子元素s1.

num从1开始  也可以是公式  例: 2n   2n-1  奇偶数  even(偶数) odd(奇数)

s1:nth-last-child(num) 匹配父元素的倒数第n个子元素s1.

s1:nth-of-type(num)            匹配同类型中的第n个同级兄弟元素s1

s1:nth-last-of-type(num)     匹配同类型中的倒数第n个同级兄弟元素s1

s1:only-child                     当子元素只有一个时 起作用

s1:not()                                   除了()里的元素,其他都选中

s1:empty                                选中内容为空的标签, 空格也算有内容

s1::before                内容之前   content内容属性

s1::after                                 内容之后