CSS篇

CSS固定格式

<style type="text/css"(可不写)>

标签名{要赋予的样式}

</style>

CSS属性:

1.文字:

font-style:文字样式

font-size:文字大小

font-weight:文字粗细

font-family:文字字体(中文要用双引号)

重要:文字属性缩写

font:属性,属性,属性,属性(属性直接可以写样式,粗细,大小,字体等,

有些属性值不能省略,一定按照样式,粗细,大小,字体的顺序写缩写)

2.文本:

text-decoration:文本装饰

underline 下划线

line-through 删除线

overline 上划线

none 不要任何格式(可以去掉超链接文字的下划线)

text-align: 文本对齐

center居中

text-indent:2em 文字缩进2个字符

类选择器(单独赋予类)(为什么不用id,因为id是专门留给js的)

<style>

#aa{}

</style>

<p class="aa">我是文字</p>

备注:id只能对应一个标签,类可以对应多个标签。

id赋予属性的时候前面加#,类赋予属性的时候前面加.。

后代选择器

格式

标签名称1 标签名称1中的标签名称2{

属性;

}

备注:可以找标签名称1中的所有后代元素。

子元素选择器

格式

标签名称1>标签名称2{

属性;

}

备注:只能找标签名称1中的所有儿子元素。

交集选择器

选择器1选择器2{

属性;

}

并集选择器

选择器1,选择器2{

属性;

}

兄弟选择器

1.相邻兄弟选择器(标签名称1相邻的一个兄弟标签)

格式:选择器1+选择器2{

属性;

}

2.通用兄弟选择器(标签名称1所有的兄弟标签)

格式:选择器1~选择器2{

属性;

}

序选择器(CSS3新增选择器)

详细可看CSS选择器参考手册(感觉并不需要现在掌握)

属性选择器

格式1:标签[id或者类]{

属性;

}

格式2:标签[id或者类=具体的id名称或者类名称]{

属性;

}

通配符选择器(企业开发中一般不用)

*{

属性;

}

CSS三大特性

1.继承性

父元素设置的一些属性,子元素也可以使用。

备注:只有color/font-/text-/line开头设置的属性才可以继承

2.层叠性

CSS处理冲突的一种特性,当样式冲突时,按照优先级来判断样式。

3.优先级

优先级判断的三种方式:

1.是否是直接选中(间接选中时冲突,选中靠近目标的那个样式)

2.是否是相同选择器(如果满足条件1,谁写在后面就选中后面的那个样式)

3.不同选择器(如果满足条件1,会按照选择器的优先级来层叠)

优先级:id>类>标签>通配符>继承>浏览器默认

important函数:

作用:提升某个直接选择器的优先级,把优先级调为最高

格式:{

属性:值 !important;

}

背景颜色设置

background-color:颜色;

背景图片设置

background-color:url(图片地址);

背景图片平铺代码:

background-repeat:

1.repeat 平铺(默认)

2.repeat-x 横向平铺 -y 纵向平铺 no-repeat 不平铺

背景图片定位(移动位置)

background-position:水平方向 垂直方向;

背景属性的缩写格式:

background:背景颜色 背景图片 平铺方式 关联方式 定位方式(按顺序)

背景图片关联方式:

background-attachment:scroll(默认,不随着滚动条滚动)fixed(随着滚动条滚动)

把一个div的元素放在一排函数

display:inline block;

盒子模型函数(加边框)

1.四条边框一起添加 border:边框的厚度 边框的样式 边框的颜色;

2.分别添加四条边框

border-top 顶部

border-right 右边

border-bottom 底部

border-left 左边

内边距函数

padding-top right bottom left(用法同边框)

例子:<style>

.box1{

padding-top:20px;

}

<div class="box1">我是文字</div>

外边距函数

margin 用法同内边距 是标签与标签之间的距离

备注:span标签没有合并现象,但是div标签有合并现象。

增加了padding和border后盒子宽高不变的函数(CSS3新函数)

border-sizing:border-box;

清空系统默认的内边距和外边距

*{

margin:0;

padding:0;

}

备注:企业开发中一般不用通配符,一般采用如下的函数:

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{

margin:0;

padding:0

}

给盒子内的文字设置行高:

line-height:

把网页排版变成浮动流:

float:left 浮动左边对齐 :right 浮动右边对齐

清除浮动格式函数:

clear: none(默认,不清除浮动) left(清除左浮动)right(清除右浮动)

both(清除左浮动和右浮动)

备注:企业开发中最推荐给盒子添加overflow:hidden来清除浮动,添加*zoom:1可以让IE6兼容。

CSS代码给签名添加内容:

签名名称::before (原有内容的前面添加):after(原有内容的后面添加)

!!!网页的导航条和选项卡用<ul>和<li>来做~~~

相对定位函数:

position:relative;

备注:相对定位后可以调整盒子的top,right,left,bottom 高,右,左,下移动位置。

调整覆盖关系的函数:

z-index:(默认为0,比0大就可以覆盖之前的元素)

a标签的伪类选择器(修改超链接的样式的函数)

a:link{

属性}(从未被访问过的超链接的样式)

a:visited{

属性}(已经访问过的超链接的样式)

a:active{

属性}(长按超链接的样式)

a:hover{

属性}(鼠标停在超链接上时候超链接的样式)

备注:如果要给超链接添加多个属性,就要按照link,visited,hover,active的顺序来添加。

CSS3新函数:过渡模块

transition-property:属性;

比如想要宽度过渡变化,就在属性内填width。

过渡时间:

transition-duration:时间;

过渡动画延迟播放:

transition-delay:时间;

CSS3新函数 2D转换:

让元素旋转 transform:rotate(度数+deg);

让元素平移 transform:translate(左右,上下)

让元素缩放 transform:scale(左右缩放的倍数,上下缩放的倍数)

备注:缩写格式transform:rotate空格transform:translate空格transform:scale;

改变元素的中心点函数

transform-origin:0px 0px;中心点改为左上角

透视属性

perspective:500px;让元素显示的近大远小

给元素添加阴影

box-shadow 给盒子添加阴影 text-shadow 给文字添加阴影

设置透明度

opacity:0 完全透明 :1 不透明

CSS3新函数:动画模块

animation-name:inj;

@keyframes inj{

from{

margin-left:0;}

to{

marjin0left:500px;}

}

动画模块连写(用这个写动画代码)

animation:动画名称 动画时长 动画运动速度 延迟时间 循环次数 往返动画;

animation:move 10s linear 0s infinite normal;

@keyframes 动画名称{

from(也可用百分比){}

to{}

}

备注:想让动画无限循环 就在循环次数那里填写单词 infinite(意思 无限的)

想让动画效果做一个往返动画 就在往返动画那里填写单词 alternate(意思 往返)

完整编写网站的步骤:

1.创建站点文件夹

网站文件夹包括 css文件夹 js文件锁 image文件夹 index首页网页

2.重置所有默认样式和设置一些全局的样式,并且将样式CSS文件和对应的界面关联起来。

重置样式的默认代码:http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css

备注:如果插入的图片大于父元素的宽度,可以用margin:0 -100%;来让图片居中。

!!!但是父元素中必须设置text-align:center;

placeholder是<textarea />的属性,意思是在输入框里背景显示某些文字。

以上是CSS方面的学习比较,适合新手看看,老手或者大佬别看了。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,980评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,178评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,868评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,498评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,492评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,521评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,910评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,569评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,793评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,559评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,639评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,342评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,931评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,904评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,144评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,833评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,350评论 2 342

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,722评论 1 92
  • CSS 1、介绍一下标准的CSS的盒子模型?低版本IE的盒子模型有什么不同的? (1)有两种,IE盒子模型、W3C...
    京程一灯阅读 1,742评论 3 26
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,400评论 1 45
  • 介绍一下标准的CSS的盒子模型?低版本IE的盒子模型有什么不同的? (1)有两种, IE 盒子模型、W3C 盒子模...
    无目的阅读 344评论 0 1
  • 昨天,看了最新一期的快本,原本只是无聊消遣时间,然而那段情书环节,让我看了不下5次,更让我收获了满满的感触。 胡...
    飞浪阅读 292评论 0 1