前端设计:CSS 入门

发布于 2017-03-07  207 次阅读


CSS(Cascading Style Sheets:层叠样式表)是一种用来表现 HTML(标准通用标记语言的一个应用)或 XML(标准通用标记语言的一个子集)等文件样式的计算机语言,它能够真正做到网页表现与内容分离。

CSS 样式

<h1 style="color:red;">CSS 样式</h1>,其中 color:red 这样的 CSS 语句就叫做 CSS 样式。

  • 字体大小:''font-size:16px;''
  • 字体加粗:''font-weight:bold;''
  • 背景颜色:''background-color:black;''
    注意:每个 CSS 样式之间要用 '';'' 隔开,如:<p style="color:red;font-size:16px;">你好</p>显示为:

你好

常用特性

  • 文字的水平对齐text-align:参数
    指定行框与哪个点对齐,从而设置块级元素内文本的水平对齐方式。属性值:''left''(左侧对齐)、''right''(右侧对齐)、''center''(居中)和 ''justify''(两端对齐)。
  • 文字的颜色color:颜色;
    元素的前景色(在 HTML表现中,就是元素文本的颜色),颜色的写法有 3 种:英文名、16 进制 #RRGGBB、RGB 颜色。
  • 背景颜色background-color:颜色;
    为元素设置一种纯色,填充元素的内容、内边距和边框区域,扩展到元素边框的外边界(但不包括外边距)。如果边框有透明部分(如虚线边框),会透过这些透明部分显示出背景色。
  • 背景图片background-image:url('图片地址');
    背景图片(background-image)的设置可以使得元素的背景占据了元素的全部尺寸,包括内边距和边框,但不包括外边距。
  • 背景图片位置background-position:竖直 水平;
    默认地,背景图像位于元素的左上角[left top],并在水平和垂直方向上重复;而当背景图片位置(background-position)被设置后,背景图片的开始位置就可以不再使用默认的左上角了。
    竖直方向:center、top、bottom
    水平方向:center、left、right
    也可以用 30px 20px 这样的形式,设置背景图片相对对象上沿、左沿的开始位置的具体数值。
    例如:将对象设置成有蓝色背景,加某个叫 sky 的图片做背景并且水平、垂直方向都居中的时候:
    p {background-color:blue;background-image: url('./sky.jpg');background-position: center center;}
  • 边框border:边框宽度 边框样式 边框颜色;
    边框宽度用数字加单位的形式(如 1px),边框样式包括 ''solid''(实线)、''dotted''(点)、''dashed''(虚线)和 ''double''(双线)等;边框颜色和之前文字颜色、背景颜色的定义方式相同。
  • 圆角border-radius:弧度半径;
    定义的实际上是一个边框角上的弧度半径。

盒子模式

在网页设计中常听的属性名:元素本身(content)、内边距(或称“填充”,padding)、边框(border)、外边距(margin), CSS 盒子模式都具备这些属性。
内容(content)是盒子里装的东西;内边距(padding)类似“填充物”,就是怕盒子里装的东西(贵重的)损坏而添加的泡沫或者其它抗震的辅料;边框(border)就是盒子本身;外边距(margin)说明盒子摆放的时候不能全部堆在一起,要留一定空隙保持通风。
在网页设计上,内容常指文字、图片等元素,也可以是小盒子(div 嵌套);
与现实生活中盒子不同的是,现实生活中的东西一般不能大于盒子,否则盒子会被撑坏的,而 CSS 盒子具有弹性,里面的东西大过盒子本身最多把它撑大,但它不会损坏的。
填充 ''padding'' 只有宽度属性,可以理解为生活中盒子里的抗震辅料厚度;而边框 ''border'' 有大小和颜色之分,我们又可以理解为生活中所见盒子的厚度以及这个盒子是用什么颜色材料做成的;边界 ''margin'' 就是该盒子与其它东西要保留多大距离。
每个 HTML 标记都可看作一个盒子; 每个盒子都有:''border''、''padding''、''margin'' 属性; 每个属性都包括四个部分:上、右、下、左;这四部分可同时设置,也可分别设置。

其他用法

  • text-size-adjust: 100% 用法
    iPhone 和 Android 的浏览器纵向 (Portrate mode) 和橫向 (Landscape mode) 模式皆有自动调整字体大小的功能。控制它的就是 CSS 中的 -webkit-text-size-adjust:100%。
  • 图片居中的方法
    其他方法经常行失效,img{clear: both; display: block; margin:auto;}
    :after,:before 移动
.entry h1:before,.entry h2:before,.entry h3:before,.entry h4:before,.entry h1:after,.entry h2:after,.entry h4:after {content:"";position:absolute;width:5px;height:5px;background:#fa1;left:-26px;top:.8em;border-radius:10px;}
.entry h1:after,.entry h4:after {background:#f55;left:-12px;top:.2em;}
.entry h1:before,.entry h1:after {width:12px;height:12px;top:.34em;left:-18px;}
.entry h1:before {animation:h1_a 1s .25s ease-in-out infinite;}
.entry h1:after {animation:h1_b 1s -.25s ease-in-out infinite;}
.entry h2:before,.entry h2:after {top:.36em;left:-18px;width:10px;height:10px;}
.entry h2:before {animation:h2_a 1s ease-in-out infinite;top:2px;}
.entry h2:after {left:auto;margin:0 0 0 18px;animation:h2_b 1s ease-in-out infinite;background:#5DA;}
.entry h3:before {width:8px;height:8px;top:6px;left:-18px;background:#3cf;animation:h3_b 1s -0.1s ease-in-out infinite;}
.entry h3:after {content:"#";position:absolute;font-weight:bold;margin:0 0 0 10px;color:#5DA;}
.entry h4:after {animation:h4_a 1s ease-in-out infinite;top:0;}
.entry h4:before {animation:h4_b 1s .1s ease-in-out infinite;top:auto;bottom:0;}
@keyframes h1_a {50% {transform:translateX(-12px);}
}
@keyframes h1_b {50% {transform:translateX(-12px);}
}
@keyframes h2_a {50% {transform:translateY(10px);}
}
@keyframes h2_b {50% {transform:translateX(-10px);}
}
@keyframes h3_b {50% {transform:translateX(-8px);}
}
@keyframes h4_a {50% {transform:translateY(10px);}
}
@keyframes h4_b {50% {transform:translateY(-12px);}
}
  • 背景渐变
    ul:before {content: '';position: absolute;top: 0;left: 0;right: 0;height: 2px;background: #000;background-image: linear-gradient(to right,#000,#fff);
  • 文字投影
    text-shadow: #000 1px(左右) 12px(上下) 2px(大小、模糊程度);

学习资源

CSS 资源在线手册


二十多岁的年纪,希冀着时光别走…