我爱编程

CSS基础

2017-05-07  本文已影响0人  PYFang

!!每个元素都有默认样式，因为 HTML 发明的时候，还没有 CSS

文档流（普通流）

1，内联元素：从左到右依次排列，如果没有空间了，则自动换行
2，块级元素：从上到下依次排列，每个元素占一行

响应式

1，什么都不做就是响应式
2，图片的宽度默认是固定的，一般我们需要加 max-width: 100% 使图片自适应宽度
3，不要写死宽度

如何在html中引入css

1，内联样式

<p style="color: red;background-color: green;"></p>

设置p的颜色为红色，背景颜色为绿色。

2，内部样式

<style type="text/css">...</style>

表示这是样式表,在中间放入css内容；type是它的类型属性，text/css是它的值，它们是告诉浏览器这里面的文本内容(text)要当层叠样式表 (css)来解析，不能当作其它的来解析。

3，外部样式

<link rel="stylesheet" type="text/css" href="链接文件地址">

表示使用元素链接外部信息，rel指定了html文件与所链接文件之间的关系，链接到样式表所以用stylesheet。href是css文件地址。

4，以上方法都可以用 JS 搞出来

（这是我抄方方老师我还没学js我也不懂）

var style = document.createElement('style')
style.innerHTML = 'h2{color: green;}'
document.head.appendChild(style)

var link = document.createElement('link')
link.rel = 'stylesheet'
link.href = 'http://localhost:8888/style.css'
document.head.appendChild(link)

如何在html中引入另一个css

@import
@import详细内容

推荐自学教程： MDN CSS 中文教程

语法

CSS 的语法只有两种规则：
1，样式规则

/*注释*/
div.menu-bar li:hover > ul { 
display: block;  /*分号不能省*/
color: red  /*最后一个分号可以省，但是建议不要省*/
}

2，at规则

值（CSS 2.1）

1，整数和实数
如 「1」「.5」「0.3」
2，长度
相对单位 1em 1ex
绝对单位 1px 1in 1cm 1mm 1pt 1pc
CSS 3 相对单位： 100vh 100vw 1rem
vh:视口高度（等于100的时候是一样高）
vw:视口宽度（等于100的时候是一样宽）
rem:相对于根元素的影响

3，百分比
每个地方的百分比，意义都不一样，你需要查 MDN 才能知道其具体意义
例如 margin-left 和 margin-top
4，URL与URI

body { background: url("http://www.example.com/pinkish.png") } /*引号可选*/

5，计数器

p {counter-increment: par-num}
h1 {counter-reset: par-num}
p:before {content: counter(par-num, upper-roman) ". "}

6，颜色

h2 { color: olive }
em { color: #f00 }              /* #rgb */
em { color: #ff0000 }           /* #rrggbb */
em { color: rgb(255,0,0) }    /*rgb*/  
em { color: rgb(100%, 0%, 0%) } /*rgb的百分比*/

/*CSS 3 https://www.w3.org/TR/css3-color/*/
div { background: transparent; }/*透明*/
div { background: rgba(0,0,0,0.25); }/*最后一个表示透明程度的比例*/
div { background: hsl(0,0%,0%); }/*颜色色相.饱和度.亮度*/
div { background: hsla(0,0%,0%,0.25); }/*颜色色相，饱和度，亮度，透明比例*/

inherit(继承)
box-shadow:10px 5px 5px 1px black:(水平移动，上下移动，模糊程度，影子以边缘为基准的放大或缩小,阴影颜色)
7，字符串
8，不支持的值

选择器

1，越具体优先级越高
2，相同优先级，写在后面的优先级高
3，!important 最高

盒模型

1，border-box

width=contnet

2，content-box

width=content+padding+border

Normal Flow（正常的流程）

display

display CSS属性指定用于元素的呈现框的类型。在 HTML 中，默认的 display 属性取决于 HTML 规范所描述的行为或浏览器/用户的默认样式表。在 XML中，其默认值为 inline。

常用值：

none 此元素不会被显示。
block 此元素将显示为块级元素，此元素前后会带有换行符。
inline 默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block 行内块元素。（CSS2.1 新增的值）
list-item 此元素会作为列表显示。
run-in 此元素会根据上下文作为块级元素或内联元素显示。
compact CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
marker CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
table 此元素会作为块级表格来显示（类似 table），表格前后带有换行符。
inline-table 此元素会作为内联表格来显示（类似 table），表格前后没有换行符。
table-row-group 此元素会作为一个或多个行的分组来显示（类似 tbody）。
table-header-group 此元素会作为一个或多个行的分组来显示（类似 thead）。
table-footer-group 此元素会作为一个或多个行的分组来显示（类似 tfoot）。
table-row 此元素会作为一个表格行显示（类似 tr）。
table-column-group 此元素会作为一个或多个列的分组来显示（类似 colgroup）。
table-column 此元素会作为一个单元格列显示（类似 col）
table-cell 此元素会作为一个表格单元格显示（类似 td 和 th）
table-caption 此元素会作为一个表格标题显示（类似 caption）
inherit 规定应该从父元素继承 display 属性的值。

inline-block 的两个「bug」

你在使用 inline-block 元素的时候一定会遇到两个bug

1， 两个inline-block 元素之间如果有空格、回车、tab，那么在页面上就有一个空隙
标准答案：将父元素的 font-size 设置为0，然后在 inline-block 元素中将 font-size 设置为 14px
实际工作：使用 block 或 float 或 flex，不要使用 inline-block
2 ，两个不同高度的 inline-block 元素无法对齐
还有一种现象就是 img 元素下面无缘无故多出几像素。
标准答案：改变 inline-block 元素的 vertical-align，一般改为 top 或 middle
实际工作：使用 float（用了浮动就要清除浮动） 或 flex，不要使用 inline-block
如果想搞清楚到底为什么会有这两个 bug，就看这篇文章：
深入理解 CSS：字体度量、line-height 和 vertical-align
看完之后，保证你更加搞不清楚。
因为这是字体设计相关的知识，不是 CSS 知识。

border&outline区别：

border:10px solid red;(影响原来位置)
outline:10px solid red;（不影响原来位置）

css学习法

1，CSS 没有为什么，你只能接受现实。
2，CSS 有些属性互相影响，组合起来极其复杂
3，CSS 有些属性很独立，跟其他属性一点关系都没有
！主要秉承「观察法」——即眼见为实。

自学学习大法：
1， Copy from MDN (复制MDN)
2， Run in JSBin（在jsbin应用）
3， Modify in Chrome Developer Tools（在chrome开发工具中修改）
！新手最好使用border大法（给每个元素加上border）

实践

注意默认样式
方块
按钮
表格

常用的字体系列：

负的外边距（margin）可以让ul变宽一点同时不影响占位
浮动可以让两个块级元素处于同一行，但浮动之后记得清除浮动，
清除浮动用：clear fix：让一个元素包住它里面的浮动元素
方框变成圆：border-radius:50%;
浮动的特现：文字会环绕图片周围，浮动脱离了文档流。
clear:left向左看不能看到浮动的元素
clear:both两边都不能看到浮动的元素
clear:right右边看不能看到浮动的元素

一般各种属性：
background-color:背景颜色
border:边框
border-bottom:边框的下边框
font-family:字体
font-weight:字体粗细
font-style:斜体文本
font-size:字体大小
background-image:背景图片
line-height：行间距
padding：内边距
letter-spacing:在字母之间设置间距
text-align:对齐方式
top:控制元素顶部的位置
left:指定元素的左边所在位置
list-style:改变列表项外观

上一篇下一篇

猜你喜欢

热点阅读