作业(css)

样式

内部样式

写在</head>上一行 

写成<style>   css选择器{css样式}     </style>

追求结构(html)、表现(css)、行为(js)相分离

外部样式

文件的后缀是.css

要将外部css文件引入html文件中

写法:<link  rel="stylesheet"   href="">      写在</head>上一行

外部样式表必须使用link标签的href属性引入到html页面

行内样式

直接给标签添加了style属性          “”内采用键值对的属性

例如<div  style=“color:red;”></div>  

css选择器

标签选择器

标签选择器:使用标签名作为选择器,只要是这个标签名的标签都会被选中

                      缺点是同名的标签无法做到差异化

类选择器

类选择器写法: .类名{属性名:属性值;}

一个类选择器可以被多个有需要的标签使用

一个标签可以有多个类名,多个类名用空格隔开

id选择器

写法:   #id属性值{属性名:属性值;}

id属性值不能重复

同样的id选择器,在一个页面中只能使用一次

通配符选择器

可以查找页面当中所有的标签

写法  *{属性名:属性值;}

一般用来清除页面中某些默认的样式

尺寸和颜色

width:;宽

height:;高

background-color:;背景颜色

a链接,span标签 无法设置宽高

字体相关的样式

字体颜色:color:;

字体大小(字号):font-size:;   单位是px

字体倾斜:font-style: ;      normal正常       italic倾斜

行高:line-height:;    数字+px      如果只有数字表示 当前字体大小的几倍

                                      可以利用行高实现单行文本的垂直居中

字体:font-family:;    楷体

字体粗细:font-weight:;  填写100-700, 400为正常     700为加粗     或填bold(加粗)

复合的写法:font:; 一次对于多个字体相关的值

                  顺序要求font:是否倾斜   是否加粗     字体大小/行高     字体;

                使用font属性后,字号和字体是必须书写的,其他的不书写表示使用默认的

文本缩进

文本缩进text-indent:1em;     1em表示当前一个字符的大小

文本对齐方式

文本水平对齐方式  text-align:;  center居中   left/right 左/右

文本装饰线

text-decoration:;   none表示没有装饰线   line-through删除线

                                 underline下划线   overline上划线

改文字的颜色

1.color:关键色;

2.   color:rgb(数字,数字,数字);      (通过三元色调色)

3.   color:rgba(数字,数字,数字,数字);最后一个数字表示透明度

                                                               0-1表示透明值,越靠近0越透明

4.background-color:#+16进制;

选择器

复合选择器

 两个及两个以上的选择器
后代选择器:某个元素的所有后代元素     写法:父选择器  子选择器{  }
子代选择器:某个元素下面的子代元素(最近的子集)   写法:父类选择器>子类选择器{  }

并集选择器:一次性选中多个标签 ,多个选择器之间用逗号隔开

                     例如:div,p,span{  }       或   .one,p,span{  }  (<div  class="one"></div>)

交集选择器:选中同时满足多个条件的标签 ,并且选择器之间没有任何的间隔和符号

                      写法:选择器1选择器2{  }    两个选择器之间不需要任何东西

伪类选择器

表示选择元素的某个状态        写法:冒号+属性值

:hover      表示鼠标悬停时

a:link       表示(超链接)访问前

a:visited   表示(超链接)访问后

a:active   表示(超链接)访问时

想要全部使用需要顺序要求:LVHA  (先link,再visited,再hover,最后active)    

:checked  选择所有选中的表单元素

:disabled 选择所有禁用的表单元素

:empty     选择所有没有子元素的p元素

:enabled   选择所有启用的表单元素

:first-of-type  选择的每个p元素是其父元素的第一个p元素

:nth-child(数字)   选中某个元素下的子元素

例如:1.  ul  li:nth-child(3){  }   表示选中ul下的第三个li

            2.p:nth-child(3){  }    表示选中p标签的父元素下的子元素,且第三个子元素为p标签

:first-child  父元素下的第一个子元素

:last-child  父元素下的最后一个子元素

:nth-child(2n+1) 奇数个

:nth-child(2n)   偶数个

:nth-of- type(1)   表示第一个p标签  

:focus{  }   表示聚焦状态(选中状态) 

属性选择器

写法:标签【属性=属性值】{  }      (具有xx属性的xx标签)

           标签【属性^=x】  以x为开头的标签

           标签【属性$=x】  以x为结尾的标签

           标签【属性*=x 】  含有x的标签

其他

兄+弟:紧挨着兄标签的下一个弟标签,并且具有相同的父元素

兄~弟:选取兄弟元素后面所有的相同元素,要求不必紧紧跟随并且是同一个父元素

伪元素选择器

写法:  标签::before{ content:“111”;}    表示在标签前加111

             标签::after{ content:“111”;}    表示在标签后加111

css的特性

继承性:子集默认继承

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值