CSS基本样式（基础中的基础）

作者: 好奇男孩 | 来源:发表于2018-03-09 08:23 被阅读32次

1.如何在页面引用 CSS

1.内联样式；
2内部引用样式；
3外部引用link标签，引用样式；
4外部引用@import引用样式；

注意：link标签与@import有区别：

1link属于XHTML标签，而@import完全是CSS提供的一种方式。
link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS了。
2：加载顺序的差别。当一个页面被加载的时候，link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁）。
3.兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。
4.@import只能css中再次引入其他样式表，比如可以创建一个主样式表，在主样式表中再引入其他的样式表，这样做有一个缺点，会对网站服务器产生较多的HTTP请求

@import的使用范例：
<style>
  @import url("hello.css");
  @import "world.css";
</style>

2.CSS 继承

什么是 CSS 继承?

元素没有被设置样式，但它可以从父元<div>素继承样式，如上hello world字体颜色为红色；

<style>
    .father{
      color: #f00;
    }
  </style>
</head>
<body>
  <div class="father">
    <p>hello world</p>
  </div>
</body>

1.png

要详细了解css样式表的继承，我们先从文档树（HTML DOM）开始，文档树由HTML元素组成,文档树和家族树类似，也有祖先、后代、父亲、孩子、兄弟，css样式表继承指的是，特定的css属性向下传递到后代元素。
对于一些可以继承的属性，可以只设置上级的CSS样式表树形，子级（下级）不用设置，会自动继承此CSS属性，可以减少CSS代码，便于维护。

那么有哪些属性可以自动继承呢

1、字体系列属性
font：组合字体
font-family：规定元素的字体系列
font-weight：设置字体的粗细
font-size：设置字体的尺寸
font-style：定义字体的风格
font-variant：设置小型大写字母的字体显示文本，这意味着所有的小写字母
均会被转换为大写，但是所有使用小型大写字体的字母与其余文本
相比，其字体尺寸更小。
font-stretch：允许你使文字变宽或变窄。所有主流浏览器都不支持。
font-size-adjust：为某个元素规定一个 aspect 值，字体的小写字母 "x"
的高度与"font-size" 高度之间的比率被称为一个字体的 aspect 值。
这样就可以保持首选字体的 x-height

2、文本系列属性
text-indent：文本缩进
text-align：文本水平对齐
text-shadow：设置文本阴影
line-height：行高
word-spacing：增加或减少单词间的空白（即字间隔）
letter-spacing：增加或减少字符间的空白（字符间距）
text-transform：控制文本大小写
direction：规定文本的书写方向
color：文本颜色
3、元素可见性：visibility
4、表格布局属性：caption-side
border-collapse
empty-cells
5、列表属性：list-style-type
list-style-image
list-stye-position、list-style
6、设置嵌套引用的引号类型：quotes
7、光标属性：cursor

不可继承的属性

1、display
2、文本属性：vertical-align
text-decoration
3、盒子模型的属性:宽度、高度、内外边距、边框等
4、背景属性：背景图片、颜色、位置等
5、定位属性：浮动、清除浮动、定位position等
6、生成内容属性:content、counter-reset、counter-increment
7、轮廓样式属性:outline-style、outline-width、outline-color、outline
8、页面样式属性:size、page-break-before、page-break-after

注意

继承中比较特殊的几点
1、a 标签的字体颜色不能被继承
1、<h1>-<h6>标签字体的大下也是不能被继承的
因为它们都有一个默认值

3.块级元素与行内元素

常用的块级元素与行内元素有哪些？

块级元素：div , p , form, ul, li , ol, dl, form, address, fieldset, h1-6, hr,menu, table,dd dt tr td th,pre

行内元素：span, strong, em, br, img , input, label, select, textarea,button,code ,script

块级元素与行内元素的区别

区别1：块级元素独占一行，行内元素的长度就是内容的长度。
区别2：块级元素可以设置宽高，行内元素不能设定宽和高。
区别3：块级元素可以包含行内元素，但行内元素不能包含块级元素
区别4：行内元素的padding-top、padding-bottom、margin-top、margin-bottom属性设置是无效的
行内元素的padding-left、padding-right、margin-left、margin-bottom属性设置是有效的

注意：

行内元素的padding-top、padding-bottom从显示的效果上是增加的，但其实设置的是无效的。并不会对他周围的元素产生任何影响。
范例：

  <style>
        div{
            border:1px solid red;
        }
        span{
          border:1px solid #0f0;
            padding-top:20px;
            padding-bottom:20px;
            padding-left:20px;
            padding-right:20px;
            margin-top: 20px;
            margin-bottom:20px;
            margin-left: 20px;
            margin-right: 20px;
        }

    </style>
</head>
<body>
<div>
    <span>hello </span><span>world</span>
</div>

</body>

2.png

4.如何让元素水平居中

a.块级元素居中：

设置margin:0，auto；

.box {
  /* margin: 0 auto; 实际上是下面两个起作用 */
  margin-left: auto;
  margin-right: auto;
}

b.行内元素居中：

给父级块级元素设置：text-align: center;

<style>
  .box{
    text-align: center;
  }
</style>
<div class="box">
  <img src="http://7xpvnv.com2.z0.glb.qiniucdn.com/6673909a-098c-4202-8b80-f4aad64e0262.png">
</div>

5.display属性

块级：block, list-item, table
行内: inline, inline-table, inline-block
display'
Value: inline | block | list-item | inline-block | table | inline-table | table-row | table-cell | none | inherit
Initial: inline
Applies to: all elements
Inherited: no

6.字体font

font-size：字体大小
font-family：字体，宋体、微软雅黑、Arial等
font-weight：文字粗度，常用的就是默认值regular和粗体bold
line-height：行高，可以用百分比、倍数或者固定尺寸
以上属性都可继承给子元素
用法：

body{
  font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
}

p {
  line-height: 1.5;
  font-size: 12px;
  font-family:  tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
  font-weight: bold;
}

font-family

当浏览器打开页面时，浏览器会读取 HTML 文件进行解析渲染。当读到文字时会转换成对应的 unicode码（可以认为是世界上任意一种文字的特定编号）。再根据HTML 里设置的 font-family （如果没设置则使用浏览器默认设置）去查找电脑里（如果有自定义字体@font-face ，则加载对应字体文件）对应字体的字体文件。找到文件后根据 unicode 码去查找绘制外形，找到后绘制到页面上
字体图标就是通过这原理实现的

注意1：

注意2：

chrome 默认字体大小16px, 最小字体 12px

7.文本text

text-align：文本对其方式 left、center、right、justify
text-indent：文案第一行缩进距离
text-decoration： none、underline、line-through、overline
color：文字颜色
text-transform：改变文字大小写none、uppercase、lowercase、capitalize
word-spacing：可以改变字（单词）之间的标准间隔
letter-spacing：字母间隔修改的是字符或字母之间的间隔

单行文本溢出加 ...如何实现?

  <style>
    .card{
      width: 400px;
      border: 1px solid red;
      font-size: 20px;
             }
    .card img{
      width: 400px;
    }
    a{
      text-decoration: none;
      color: #ccc;
}
    .card p,h3{
      white-space:nowrap;/* 文本不会换行，文本会在在同一行上继续 */
      overflow: hidden;
      text-overflow: ellipsis;/* 显示省略符号来代表被修剪的文本。 */
      
      
      
}
  </style>
</head>
<body>
<div class="card">
  <img src="https://www.google.com.hk/logos/doodles/2018/paralympics-2018-4676703698812928.2-law.gif" alt="">
  <h3><a href="#">这是标题这是标题这是标题这是标题这是标题这是标题这是标题这是标题</a></h3>
  <p>这是介绍这是介绍这是介绍这是介绍这是介绍这是介绍这是介绍这是介绍</p>
</div>
</body>
</html>

3.png

8.颜色color

单词: red, blue, pink, yellow, white, black
十六进制: #000000, #fff, #eee, #ccc, #666, #333, #f00, #0f0, #00f
rgb: rgb(255, 255, 255), rgb(0, 255, 0)
rgba: rgba(0,0,0,0.5)
其他

9.单位

px：固定单位，px就是pixel的缩写，意为像素。px就是一张图片最小的一个点，一张位图就是千千万万的这样的点构成的，比如常常听到的电脑像素是1024x768的，表示的是水平方向是1024个像素点，垂直方向是768个像素点。
百分比(宽高？文字大小？line-height? position?)
em: 相对单位，相对于父元素字体大小， em的参考物是父元素的font-size，具有继承的特点。如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。
rem: 相对单位，相对于根元素(html)字体大小，rem是css3新单位，相对于根元素html（网页）的font-size，不会像em那样，依赖于父元素的字体大小，而造成混乱
vw vh: 相对单位，1vw 为屏幕宽度的1%，vw是css3新单位，viewpoint width的缩写，视窗宽度，1vw等于视窗宽度的1%。举个例子：浏览器宽度1200px, 1 vw = 1200px/100 = 12 px。

使用边框做三角形

范例：

    <style>
        .layout{
            width: 600px;
            margin: auto;
        }
        .style1{
            width: 0px;
            height: 0;
            border-top: 50px solid blue;
            border-right: 50px solid yellow;
            border-bottom: 50px solid green;
            border-left: 50px  solid red;
        }
        .style2{
            margin-top:30px ;
            width: 0px;
            height: 0;
            border-top: 50px solid blue;
            border-right: 50px solid #fff;
            border-bottom: 50px solid #fff;
            border-left: 50px  solid #fff;
        }
        .style3{
            margin-top:30px ;
            width: 0px;
            height: 0;
            border-top: 50px solid #fff;
            border-right: 50px solid #fff;
            border-bottom: 50px solid #fff;
            border-left: 50px  solid #f00;
        }
        .style4{
            margin-top:30px ;
            width: 0px;
            height: 0;
            border-top: 50px solid #fff;
            border-right: 50px solid yellow;
            border-bottom: 50px solid #fff;
            border-left: 50px  solid #fff;
        }

        .style5{
            margin-top:30px ;
            width: 0px;
            height: 0;
            border-top: 50px solid #fff;
            border-right: 50px solid #fff;
            border-bottom: 50px solid green;
            border-left: 50px  solid #fff;
        }

        .style6{
            margin-top:30px ;
            width: 0px;
            height: 0;
            border-top: 50px solid #fff;
            border-right: 50px solid #fff;
            border-bottom: 50px solid #f00;
            border-left: 50px  solid #f00;
        }
       .style7{
            margin-top:30px ;
            width: 0px;
            height: 0;
            border-top: 50px solid #fff;
            border-right: 50px solid #0f0;
            border-bottom: 50px solid #0f0;
            border-left: 50px  solid #fff;
       }
    </style>
</head>
<body>
<div class="layout">
    <div class="style1"></div>
    <div class="style2"></div>
    <div class="style3"></div>
    <div class="style4"></div>
    <div class="style5"></div>
    <div class="style6"></div>
    <div class="style7"></div>
</div>
</body>
</html>

5.png
作者：彭荣辉
链接：https://www.jianshu.com/u/0f804364a8a8
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。