CSS

2019-07-29  本文已影响0人  风清扬子旺

原文

第一章 基础

层叠样式表(英文全称:Cascading Style Sheets)

一、什么是CSS

使用CSS给每一个单元格加上背景颜色,只需要在最前面加上CSS代码,所有的单元格就都有颜色了。

注:这是一种分层设计的思想,CSS把颜色、大小、位置等信息剥离到<style>中,而html只关心提供什么样的内容。

<style>

td{

  background-color:gray;

}

</style>

<table border="1">

  <tr >

      <td>1</td>

      <td>2</td>

  </tr>

  <tr>

      <td>3</td>

      <td>4</td>

  </tr>

  <tr>

      <td>a</td>

      <td>b</td>

  </tr>

</table>

二、语法

css的语法:

selector {property: value} 

即 选择器{属性:值} 

//学习css即学习有哪些选择器,哪些属性以及可以使用什么样的值

三、三种选择器(元素选择器、id选择器、类选择器)

1.元素选择器

2.id选择器

3.类选择器

第二章 CSS语法

1.设置元素的尺寸


2.设置背景


3.设置文本样式


4.设置字体样式


5.鼠标样式

运行实例一:鼠标移动到这段文字上,就看到鼠标样式变成了十字架


6.设置表格

①表格布局:

          属性:table-layout 

          automatic; 单元格的大小由td的内容宽度决定 

          fixed; 单元格的大小由td上设置的宽度决定 

          注:只对连续的英文字母起作用,如果使用中文就看不到效果

②表格边框

          属性:border-collapse

           值:

           separate:边框分隔

            collapse:边框合并

7.边框

8.内边框

元素内边框:指的是元素里的内容与边框之间的距离

9.外边框

元素的外边框:指的是元素边框和元素边框之间的距离

10.边框模型

11.超链状态

12.CCS文件和html文件分离

<link rel="stylesheet" type="text/css" href="first.css" />


第三章 布局

1.绝对定位:(属性:position;值:absolute)

通过指定left,top绝对定位一个元素

2.相对定位

3.浮动

属性:float

值:left、right                        

4.显示方式

元素的display显示方式有多种,隐藏、块级、内联、内联-块级

块级元素 内联元素

5.水平居中

align="center" 或者 style="text-align:center"

6.垂直居中

8.左右固定

9.贴在下方

bottom:0

上一篇下一篇

猜你喜欢

热点阅读