css学习01

CSS（级联样式语言）简介：

作用：美化页面

语法规范：选择器+声明

例子：

<style>
        /*选择器{样式}*/
        /*给谁改样式{改什么样式}*/
        
        p {
            color: red;
            /*文字像素的修改*/
            font-size: 12px;
        }
    </style>  在</head>前。

属性和属性之间键值对出现，属性和属性值之间用；分割；多个键值对之间也用；分割。

代码分格：

1.样式格式：

A.展开式格式：

p {
            color: red;
            /*文字像素的修改*/
            font-size: 12px;
        }      直观。

B.样式大小写：小写字母书写

c.空格规范：属性值前，冒号后保留一个空格；

选择器和大括号之间保留一个空格。

二。基础选择器的作用

做选择标签使用

1.基础选择器

a.标签选择器：

  HTML标签名做选择器 为页面中所有同一标签统一设置：不能差异化。

b.类选择器

选择一个或者几个标签;类名不可用标签名；

长类名中间用-解开。

语法：.类名 {

            属性1：属性值1;

            ...

        }

用class调用；

例如：样式点定义；结构类（class）调用；一个或多个；开发最常用

.red{

        color:red;

    }     

 <p class="red">男生</p>

命名规范。

div为盒子。

多类名：一个物体多个属性；

 <div class="red font20">亚瑟</div>

有相同属性，这可提取出来节省代码。

c.id选择器   样式#定义，结构id调用，只能调用一次  别的标签不可使用；

语法:

#id{

            属性1；属性值1；

            。。。

        }


  调用：      #nav {

            color:red;

        }

id和class区别：

1.class可以多次使用；同一个名字多人使用

2.id是唯一的；

d.通配符选择器

选取页面中所有的元素

语法：

* {

            属性1；属性值1； ...

        }

三.字体属性

大小，粗细，文字样式等。

1.字体系列

Family 属性定义文本的字体系列

 p {font-family: "微软雅黑"}

 div { font-family: Arial, "Microsoft yahei", "微软雅黑"

各个字体之间用逗号隔开，多个字体兼容性会变好；字体多数放在body标签中。

2.字体大小

Font-size：20 px；

在body中统一字体大小；标题标签特殊指定；px像素单位；谷歌像素大小为16px；

3.字体粗细：

font-weight：normal   默认值；

属性：

4.字体样式

font-style：normal；

italic：（斜体）

5.复合代码：

 不可颠倒：属性顺序：

font-style   font-weight    font-size/line-helght        font-family;

红色部分不可省略；其他均可省略；

总结：

四.文本属性

1.文本颜色：

Div{

color：red{#ff0000}；三色表示法； 多用16进制；

2.对齐文本

Text-align    水平对齐方式

语法：

 div {

            text-align: center;

        }

属性：

3.装饰文本

text-decoration  给文本添加下划线，删除线，上划线等·。

语法：

 h1 {

            text-decoration: underline;

        }

4。文本缩进

Text-indent属性 文本第一行的缩进

语法：负值则往左

div {

            text-indent: 10px;

 text-indent: 2em;（em为一个字的大小，相对单位）

       }

5.行间距

line-height（行与行之间的距离）

语法： 

 p {

            line-height: 26px;

        }         行间距是上下间距加文本高度

四。引入方式：

1.行内样式表（行内式） 少用

用于修改简单样式表·

语法：

<div style="color:red; font-sixe:12px;">青春不常在抓紧谈恋爱</div>

控制当前段落；

2.内部样式表（嵌入式）

上部学习均为

注意：控制整个页面的元素方式；

放在HTML页面内部；

结构样式清新；

没有完全分离；

3.外部样式表（链接式）多用用

用于多代码时（css）多个页面使用

语法：

单独写在外部，建立css文件，

五.Chrome调试工具