css基础语法、样式

一、css基础语法

格式：

选择器{属性1：值1；属性2：值2；}

单位：

1.px→像素（pixel）

2.%→百分比

外容器→600px 当前容器50%→300px

基本样式：

width：宽

height：高

background-color：背景色

css注释：

/*css注释内容*/

二、内联样式与内部样式

1.内联样式

style样式

2.内部样式

style标签

区别：

内部样式的代码可以复用、符合w3c的规范标准，进行让结构和样式分开处理

3.外部样式

引入一个单独的css文件，name.css

通过link标签引入外部资源，rel属性指定资源跟页面的关系，href属性资源的地址

通过@import方式引入外部样式

 

注：这种方式有很多问题，不建议使用

 三、css中的颜色表示法

1.单词表示法：

颜色表（有局限性）

2.十六进制表示法：#000000 #ffffff

0 1 2 3 4 5 6 7 8 9 a b c d e f

3.rgb三原色表示法

rgb（0,0,0）

取值范围0~255

提取颜色的下载地址：http：//www.baidufe.com/fehelper

photoshop工具

四、css背景样式

background-color背景颜色

background-image背景图

    url（背景地址）

background-repeat：平铺方式

repeat-x x轴平铺

repeat-y y轴平铺

repeat（x，y都进行平铺，默认值）

no-repeat都不平铺

background-position：背景位置

x y：number（px、%）|单词

    x：left、center、right

    y：top、center、bottom

background-attachment：背景图随滚动条移动的方式

scroll：默认值（背景位置是按照当前元素进行偏移）

fixed：背景位置是按照浏览器进行偏移的

五、css边框样式

border-style：边框样式

       solid：实线

       dashed：虚线

       dotted：点线

border-width：边框大小

      px...

border-color：边框颜色

     red #f00...

 注：针对某一条边进行单独设置

    边框也可以针对某一边进行单独设置：border-left-style：中间是方向 left、right、top、bottom

 

 注：颜色：透明颜色 transparent

六、css文字样式

fout-family：字体类型

      英文：Arial、'Times New Roman'

      中文:微软雅黑，宋体

中文字体的英文名称

      微软雅黑：'Microsoft YaHei'

      宋体：SimSun

衬线体与非衬线体

 注意事项：

1.设置多字体类型的设置目的

2.引号（字体类型中有引号）的添加的目的

fout-size：字体大小

 默认：16px

写法：number（px）|单词（small large ...不推荐使用）

注：字体大小一般为偶数

font-weight：字体粗细

    模式：正常（normal）、加粗（bold）

    写法：单词（normal、bold）|number（100 200 .......900，100-500为正常，600-900为加粗）

font-style：字体样式

     模式：正常（normal） 斜体（italic）

     写法：单词（normal、italic）

     注：oblique也表示是斜体，用的比较少，一般了解即可。

     区别：1.italic带有属性倾斜字体的才可以设置倾斜操作。

                2.oblique没有倾斜属性的字体也可以设置倾斜操作。

color：字体颜色

七、css段落样式

text-decoration：文本装饰

     下划线 ：underline

     删除线：line-through

     上划线：owerline

     不添加任何装饰：none

      取值

      添加多个

     注：添加多个文本注释（空格添加）

text-transform：文本大小写（针对英文段落）

      取值

      小写：lowercase

      大写：uppercase

      只要首字母大写：capitalize

text-indent：文本缩进

    首行缩进

      em单位：相对单位，1em永远都是跟字体大小相同

text-align：文本对齐方式

   对齐方式：left、right、center、justify（两端点对齐）

line-height：定义行高

什么是行高：一行文字的高度，上边距和下边距的等价关系。

 默认行高：不是固定值，根据当前字体变化

取值：number（px）|  scale（比例值，跟文字大小成比例的）

letter-spacing：字之间的间距

Word-spacing：词之间的间距（针对英文）

强制折行：（针对英文和数字不自动折行的问题）

     1.word-break：break-all（非常强烈的折行）

     2.word-wrap：break-word（不是那么强烈的折行，会产生一些空白间距）

小练习

 

 

八、css复合样式

一个css属性只控制一种样式，叫做单一样式

一个css属性控制多种样式，叫做复合样式

复合样式的写法：通过空格的方式实现，复合写法有的不需要关心顺序，有的需要关心顺序

1.  background：red url（）repeat 0 0；

2.border：1px red solid；

3. font：

      注：最少要有两个值 size family

             weight style size family

             style weight size/line-height family

 要先写复合，再写单一。