Web Design for everybody-CSS(01).md

 
  • 0 views

Web Design for everybody-CSS(01).md

1. Cascading Style Sheets(CSS)

  • Adding Style

    • Inline styling

      <h1 style="color:blue">Styled Heading</h1>

    • Internal style sheets

      • Brackets and semicolons are very important.

    • Rules of Internal style sheets

      • Styling is defined within <head>

      • Rules are defined within <style>

    • External Style sheets

      • You can put rules in an external file.

      • A line to the style sheet is put in the head section.

    • The hierarchy of styles

    • Rule Precedence(就近/新原则)

      哪个规则最新就采用哪个。

      • !important强制原则

2. Color

  • progress颜色设置

    progress {
    background-color:#e6e6e6; /*需先设置背景颜色，才能修改浏览器默认样式。*/
  }
  
progress::-webkit-progress-bar { background: #e4a896; }
progress::-webkit-progress-value  { background: rgb(218, 162, 8); }

3. font

  • Not all font-families supported by all of the operating systems, so you can provide alternatives.
h1{
	font-family：Arial, Courier, Impact /*如果支持Arial,首先选择Arial，如果不支持，寻找下个支持字体。*/
}

  • Use sans-serif when possible

  • Custom fonts

    @font-face{
    font-family: mySpecialFont;
    src: url('specialFont.ttf')
}
h1{
    font-family:mySpecialFont
}

  • font-style

    • normal
    • italic
    • oblique

  • font-variant

    设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。

    • normal

    • small-caps

      浏览器会显示小型大写字母的字体。

  • font-size

    • pixel
    • percentage

  • color&backgrund-color

  • text-align

    • left
    • right
    • center
    • justify 两端对齐

  • line-height

    使用百分比设置行高

    <style>
p.small {line-height:70%;}
p.big {line-height:200%;}
</style>
</head>
  
<body>
<p>
这是一个标准行高的段落。<br>
这是一个标准行高的段落。<br>
大多数浏览器的默认行高约为110%至120%。<br>
</p>
  
<p class="small">
这是一个更小行高的段落。<br>
这是一个更小行高的段落。<br>
这是一个更小行高的段落。<br>
这是一个更小行高的段落。<br>
</p>

4. display

  • display

    • inline

      默认。此元素会被显示为内联元素，元素前后没有换行符。

      不能更改元素的height，width的值，大小由内容撑开。

    • block

      此元素将显示为块级元素，此元素前后会带有换行符。

      能够改变元素的height，width的值。

    • [inline-block](https://www.cnblogs.com/Ry-yuan/p/6848197.html)

      行内块元素。

      inline-block 的元素既具有 block 元素可以设置宽高的特性，同时又具有 inline 元素默认不换行的特性。

    • table

      此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。

    • none

      此元素不会被显示。

    • table

      会作为块级表格来显示（类似 <table>）

  • float

    float属性指定一个盒子（元素）是否应该浮动。

    • left
    • right
    • none

  • overflow

    规定当内容溢出元素框时发生的事情。

    • visible:内容不会被修剪，会呈现在元素框之外。
    • hidden:内容会被修剪，并且其余内容是不可见的。
    • scroll:内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
    • auto:如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。