css基础知识-CSDN博客

本文链接：https://blog.csdn.net/Zero_ying/article/details/94755828

1.css样式表的建立

方法一：内部样式表（嵌套到页面中）
写在头标签head之间

<style type="text/css">
    /*css语句*/
    </style>

方法二：内联样式（行间样式，行内样式，嵌入式样式）

<标签 style="属性：属性值；属性：属性值；"></标签>
<div style="width:100px;height:100px;border:1px；background-color:#fff;"></div>

方法三：外部样式表
步骤1：外部样式表的创建
步骤2：外部样式表的导入

<link rel="stylesheet"type="text/css"href="目标文件的路径及文件名全称"/>
           <!--使用link元素导入外部样式表时，需要将该元素写在文档头部，即<head></head>之间
           rel：用于定义文档关联，表示关联样式表
           type：定义文档类型-->

2.css样式表的优先级

内联样式表的优先级最高；内部样式表与外部样式表的优先级和书写顺序有关(<head>里面的先后排列顺序)，后书写的优先级别高。

3.css语法

css语法由两部分组成：选择符、声明
选择符{属性：属性值；属性：属性值；}
说明：1）每个css样式由两部分组成，即选择符和声明，声明又分为属性和属性值
    2）属性必须放在花括号中，属性与属性值用冒号连接
    3）每条声明用分号结束
    4）当一个属性有多个属性值的时候，属性值与属性值不分先后顺序
    5)在书写样式过程中，空格、换行等操作不影响属性展示

4.css常用选择符

选择符表示要定义样式的对象，可以是元素本身，也可以是一类元素或者制定名称的元素。

  元素选择符/类型选择符（element选择器）
 语法：元素名称{属性：属性值；}
 说明：元素选择符就是以文档语言对象类型作为选择符，即使用结构中元素名称作为选择符。例如：body、div、p、img、em、strong、span.....所有的页面元素都可以作为选择符。
 用法：改变某个元素的默认样式，统一文档某个元素的显示效果。
 
 ID选择器
 语法：#id名{属性：属性值；}
 说明：使用id选择符时应该为每个元素定义一个id名，id名应为英文名且不能使用关键字（所有的标记和属性都是关键字），一个id名称只能对应文档中一个具体的元素对象，因为id只能定义页面中某一个唯一的元素对象。最大的用处是创建网页的外围结构。
 
 类选择符（class选择符）
 语法：.class名{属性：属性值；}
 说明：使用类选择符时应为每个元素定义一个类名称。class选择符更适合定义一类样式。
 
 通配符选择符
 语法：*{属性：属性值；}
 说明：通配选择符的含义就是所有元素，常用来重置样式。
 
 群组选择符
 语法：选择符1，选择符2，选择符3{属性：属性值；}
 说明：当有多个选择符应用相同的样式时，可以将选择符用“,”分隔的方式合并为一组。
 
 包含选择符
 语法：选择符1 选择符2{属性：属性值；}
 说明：选择符1和选择符2用空格隔开，含义就是选择符1中包含所有的选择符2
 
 伪类选择符
 语法：a:link{属性：属性值；}超链接的初始状态
        a:visited{属性：属性值；}超链接被访问后的状态
        a:hover{属性：属性值；}鼠标划过超链接时的状态
        a:active{属性：属性值；}鼠标按下后超链接的状态 
 说明：4个超链接伪类选择符联合使用时应该注意顺序，正常顺序为a:link,a:visited,a:hover,a:active,错误的顺序有时会使超链接的样式失效。可以把相同的声明提出来放在a选择符中。

5.文本类属性

字体：{font-family:字体1，字体2，字体3；}
说明：浏览器会首先寻找字体1，如果存在就使用该字体来显示内容，如果字体1不存在，则寻找字体2.......如果字体2也不存在，则按系统默认字体显示。当字体是中文字体时，需加双引号；当英文字体中有空格是，需加双引号；当英文字体只有一个单词组成时不加双引号。如果需要同时设置中文字体和英文字体，应该把英文字体写在前面。

字体大小:{font-size:数值；}
说明：属性值为数值时，必须给属性值加单位，属性值为0时除外。16px/ppi为标准字体大小默认值1em; 默认情况下，1em=16px,0.75em=12px
 
 字体颜色：{color:文本颜色；}
 
 字体粗细：{font-weight:bolder/bold/normal/100-900;}bolder(更粗的）/bold（加粗）/normal（常规）
 
 字体倾斜：{font-style:italic/oblique/normal;}oblique的倾斜幅度大于italic
 
 水平对齐方式：{text-align:left/right/center/justify;} justify对内容以两端边界线对齐显示
 
 行高：{line-height：normal/数值；}
 
 文本修饰：{text-decoration：none（没有修饰）/underline（添加下划线）/overline（添加上划线）/line-through（添加删除线）；}
 
 首行缩进{text-indent:数值；}取负值可实现隐藏文本，悬挂缩进。只对第一行起作用，如果不是第一行文本则没有变化。