我的css学习博客（一）

琼穹之向

起因

  在学习html，css与SQL的时候，我经常性会忘记具体的语法语句，几乎每次写代码时都需要重新查阅资料来复习语法，因此我决定从0开始复习css，并将我的学习过程记录下来。

  我的css学习博客应该会分为7~10节，本博客为第1节。

css的代码规范

<style>
    h1 {    //选择器与{中间留有一个空格
        //展开而非挤在一行
        color: red;
        //属性值前,冒号后留有一个空格
    }
</style>

View Code

css的基础选择器

  1.标签选择器

  即用html中的标签为选择器，可统一设置此标签，使用方式如下：

<style>
    h1 {         //标签名
        color: red;
    }
</style>

View Code

  缺点是不能设置差异化样式。

  2.类选择器

  单独选择一个或者某几个标签的选择器，使用方式如下：

<style>
    .类名 {
        属性: 属性值;
        ......
    }
    <div class="类名"></div>
</style>

View Code

  多类名：一个标签可以拥有多个类名，此标签同时具有多个类名的属性：

<div class="类名1 类名2 类名3"></div>

View Code

  3.id选择器

  使用方式及作用与类选择器相同，但只能被调用一次，使用方式如下：

<style>
    #id名 {
        属性: 属性值;
        ......
    }
    <div id="id名"></div>
</style>

View Code

  经常与JavaScript混合使用。

  4.通配符选择器

  用于修改所有的标签，使用方式如下：

<style>
    * {
        属性: 属性值;
        ......
    }
</style>

View Code

 

CSS的字体属性Fonts

  1.字体系列

  font-family用于定义标签的字体系列，使用方式如下：

div {
    font-family: arial,"microsoft yahei","微软雅黑";
}

View Code

  优先使用第一种字体，若没有，再使用第二种....若都没有，则使用浏览器默认字体系列。

  2.字体大小

  font-size用于定义字体大小，使用方式如下：

div {
    font-size: 20px;
}

View Code

  px（像素值）为最常用单位（必须跟单位），谷歌浏览器的默认文字大小为16px。

  标题标签比较特殊，需要专门指定文字大小，使用body标签选择器改变标题标签字体大小没有用。

  3.字体粗细

  font-weight用于设置字体粗细，使用方式如下：

div {
    font-weight: bold;
    // bold = 700,normal = 400
}

View Code

  实际开发中多用数字。

  4.文字样式

  font-style用于设置字体的风格，使用方式如下：

font-style: italic; //倾斜
font-style: normal; //倾斜的字体不倾斜

View Code

  主要用于使倾斜的字体不倾斜。

  5.字体复合属性

  font综合写样式，节省代码量，使用方式如下：

font: font-style font-weight font-size/line-height font-family;

View Code

  顺序不可颠倒。

  不需要的属性可以省略（取默认值），但size和family不可省略，否则font不起作用。

font: 20px "微软雅黑";

View Code

 

CSS文本属性

  1.文本颜色

  改变文本颜色，使用方式如下：

color: red;               //预定义的颜色值
color: #ff0000;        //十六进制
color: rgb(255,0,0); //RGB值

View Code

  RGB与十六进制都用吸管工具复制，开发多用十六进制。

  2.对齐文本

  text-align用于设置元素内文本内容的水平对齐方式，使用方式如下：

text-align: center;//或left,right

View Code

  3.装饰文本

  text-decoration属性用于修饰文本，如添加下划线、删除线、上划线，使用方式如下：

text-decoration: underline;      //下划线
text-decoration: line-through; //删除线
text-decoration: overline;       //上划线
text-decoration: none;           //默认(没有线)

View Code

  none可用于去掉链接的下划线。下划线为重点，其他的较少使用。

  4.文本缩进

  text-indent用于制定文本第一行的缩进距离，多用于首行缩进，使用方式如下：

text-indent: 20px;//首行缩进,负值也可以
text-indent: 2em;

View Code

  em是个相对单位，1em就是当前font-size一个文字的大小，若当前元素没有设置大小，则会按照父元素的一个文字大小。

  5.行间距

  line-height用于设置行间距（行高），可以控制行与行之间的距离，使用方法如下：

line-height: 26px;

View Code

  行间距包括文本高度和上下间距，例如文本高度为16px，行间距为26px时，上下间距都为5px。

css引入方式

  1.内部样式表（嵌入式引入）

  此种方式是写到html页面内部，将css代码全部单独放入style标签里面中。

  style标签理论可以放在html文档的任何地方，但一般放在head中。

  并没有完全实现结构与样式分离。

  2.行内样式表

  此种方式是在元素标签内部的style属性中设定css方式，适用于修改简单样式，方式如下：

<div style="color: red; font-size: 12px;">我是kckv</div>

View Code

  只能控制当前标签。（个人感觉十分鸡肋）

  3.外部样式表

  实际开发都是此种方式，适合样式比较多的情况，样式单独写到css文件中，之后把css文件引入到html页面中使用。方式如下：

　　1.新建一个后缀名为.css的样式文件，将所有css代码放入（style不用放）。

　　2.在html文件中使用link标签引入这个文件。

<link rel="stylesheet" href="css文件路径">

link使用方式

  并且可以控制多个页面，重复利用。

来源：https://www.cnblogs.com/kckv/p/14697027.html