码迷,mamicode.com
首页 > Web开发 > 详细

css入门基础知识

时间:2017-08-05 20:34:27      阅读:183      评论:0      收藏:0      [点我收藏+]

标签:cli   UI   line   att   type   class   百分比   方式   显示   

一、CSS常用选择器
/*CSS注释*/
/*CSS修改页面中的所有标签必须借助选择器选中。
选择器中可以写多对CSS属性:每个属性名与属性值之间用:分隔,多对属性之间,必须用;分隔
选择器{
属性1:属性值;
属性2:属性值;   必须用英文英文!!!!!
}
 
 
页面中,所有的css代码,需要写到<style></style>标签中,style标签的type属性应该选择text/css,但是type属性可以省略
【css常用选择器】
1.标签选择器 1
写法:HTML标签名{
作用:可以选中页面中所有与选择器同名的HTML标签。
}
2.类选择器 10
写法:.class名{}
调用:在需要的调用选择器样式的标签上,使用class="class名"调用选择器。
class的优先级大于标签选择器
如果需要连个类名用空格分隔
3.ID选择器 100
写法:#ID名{}
调用:需要调用样式的标签,起一个id="id名"
同时存在时优先级ID选择器大于class选择器
id选择器整个页面中不能出现同名ID
 
class选择器与id选择器区别
①写法不同,前者用 . 后者用 #
②优先级不同
③作用范围不同,class可以选择多个,而id选择器只能使用一次。
 
【选择器的命名规范】
只能由字母数字下划线减号组成
开头不能是数字,也不能是只有一个减号
一般起名要求有语义使用英语单词与数字的组合
 
 
4.通用选择器
*{}
* 作用:可以选中页面中的所有标签,但是优先级最低
5.并集选择器
写法:选择器1.选择器2,,选择器n{}
左右:多个选择器取并集,只要标签满足其中任意一个选择器,样式即刻生效。
6.交集选择器
写法:两个选择器之间没有任何东西
作用:多个选择器取交集,到必须满足所有选择器的要求才能生效。
7.后代选择器和子代选择器
后代选择器
写法:div span{}
只要满足前一个选择器是后一个的后代,即刻生效
子代选择器
写法:div>span
必须满足后一个选择器是后一个选择器的直系子代,才能生效,中间不能有任何标签。
8.伪类选择器
写法:在选择器后面用冒号分隔紧接伪类状态
eg:.a:link{}
超链接的伪类状态:
:link未访问状态
:visited已访问状态
:hover 鼠标指上状态(最常用)
:active激活选定状态
当超链接多种伪类状态同时存在时,必须按照link、visited、hover、active顺序
 
input的伪类状态:
:hover  :focus 获得焦点状态:active
注意input的多种状态同时存在,必须按照上面的顺序。
其他标签必须按照上面的顺序。
 
 
 
【优先级权重问题】
1.CSS生效的第一原则是,近者优先。那个选择器作用于最里层标签,则这个选择起生效。
2.当选择其作用于同一层时。可以根据优先级权重,进行累加计算,
id选择器100
class选择器10
标签选择器1
并集选择器相当于多个选择器拆开写,所以并集选择器的优先级不能累加
3.当选择器作用于同一层且优先级权重相等时,则写在最后的选择器生效(离代码近)。
 
 
 
【引入CSS的三种方式】
1.行内样式表:直接在HTML标签中,使用style的方式引用;
<div style="height:100px"></div>
优点,使用灵活,优先级权重最高。
缺点:不符合w3c关于内容跟表现分离的要求;不利于样式复用。
2.内部样式表:在<head></head>标签中,使用<style></style>标签包裹CSS代码
特点:一定程度的实现了HTML与css的分离,但是分离不够彻底,没有办法多页面公用样式。
3.外部样式表:将css单独写入CSS文件中,并于html文件关联。
优点能够实现HTML与css的分离,符合w3c规范,有利于多页面重复使用统一样式
【引用css样式表】:
rel:选择stylesheet
type:选择text/css,可以省略
href:表示链接的css文件路径
导入css文件的两种方式,
①在<head></head>标签中使用link标签
②在style标签中使用@import导入
    两种导入方式的区别(面试的时候容易问)
①link属于标准的HTML标签,而@import不是标准标签
②link可以兼容所有低版本浏览器,而后者则不行
③link是将连个文件连接起来起桥梁作用,而@import相当于将css文件复制到HTML文件中。
④linkhuizaihtml文件边加载的过程中边链接css文件而@import会在html文件全部加载完以后在导入css文件。
        综上所述,我们使用link连接的方式加载css文件。 
 
 
 
【css中颜色表示方式】
 
 
①直接使用颜色单词表示:red、blue
②使用颜色的16进制数表示:#ffffff 前两位俩俩一组(最常用的)
③用RGB表示rgb(255.0.0)三位数分别表示红绿蓝的对比。rgba第四位数表示透明度。
 
 
【css常用文本属性】
1.字体、字号类:
①font-weight:字体粗细 bold(加粗) normal(正常) ligher(细体)
也可以使用100-400数值,400表示normal;700是bold
②font-style:字体样式,italic-倾斜,normal-正常 200%表示 浏览器默认大小的的两倍
③font-family:字体系列;可以直接写字体名,也可以写字体系列名
常用字体系列:serif——衬线体  sans-serif——非衬线体fontfamil可以接受多个值,用“,”分隔表示优先使用第一个,如果没有这个字体一次向后使用,通常最后一个值放字体系列值
font缩写形式:
①顺序必须是:font-weight font-style font-size/line-height font-family   
font——size/line-height必须一组,用/分隔font-family多个字体之间,用逗号分隔
2.字体颜色
①color:可以是单词、16进制、rbg等
②opacity:透明度,可选值0-1
opacity和rgba得到区别
rgba本身可以设置颜色,而opacity必须配合其他颜色属性来用
rgba仅仅是让当前颜色设置的透明,而opacity会让当前元素里面的所选文字背景,子元素都透明
3.行距对齐类
①line-height:可以写像素单、百分比、数字(表示默认行距的几倍)
行高重要作用,单行文字子在div中垂直居中,设置行高=div的高度即可让行文字垂直居中
②text-align:设置区域内的行级元素水平对齐方式:left、center、right
③letter-space:字符间距,字符与字符之间的距离。
④text-decoration:文本修饰 underline下划线、overline-上划线、 line-though删除线、none去掉超链接的下划线
⑤over-follow:设置超出区域的文字显示方式
overfollow:hidden :超出区域的文字隐藏不显示。
overfollow:scroll:无论多少文字,都会显示水平垂直滚动条
***overfollow:auto;文字多显示滚动条,文字少不显示滚动条***
可以使用 overfollow-x:scroll;overfollow-y;hidden单独修改两个方向的滚动条
⑥text-overflow:设置行末多余文字的显示方式
clip:多余文字裁剪掉
ellipsis:显示省略号,需要配合white-space:nowrap使用
white-space:nowrap;设置中文行末,不断行显示。
 
技术分享
   
   
技术分享
  *******重点:设置行末显示省略号的*********
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap
这三个条件缺一不可
 
⑦webkit-text-stroke:0.5px blue:文字描边。
webkit表示只有webkit内核浏览器    才生效:苹果和谷歌
⑧text-shadow: 2px 2px 2px blue 文字阴影有四个属性值,空格分隔
水平阴影距离,正数表示右移,负数左移,第二个数垂直阴影距离,正数上移,负数下移,第三个数值,阴影模糊距离,0表示一点不模糊。
⑨text-indent:首行缩进
 
 
 
 
 
 
 

css入门基础知识

标签:cli   UI   line   att   type   class   百分比   方式   显示   

原文地址:http://www.cnblogs.com/zhanghaoxiaoan/p/7291141.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!