WEB前端(3)—— 初识CSS

目录

什么是CSS：

CSS样式单的使用方式：

CSS的两个特性：

CSS的基本语法：

CSS的选择器：

元素选择器：

 通配符选择器：

 id选择器：

 类选择器：

属性选择器：

CSS的属性：

CSS背景选择器：

CSS字体属性：

CSS文本属性:

CSS浮动属性：

CSS定位属性：

小结： 

---

什么是CSS：

CSS，英文全称是Cascading Style Sheets,中文名为级联样式单，也有人称其为层叠样式单。层叠就是样式可以层层叠加，可以对一个元素多次设置样式，后面定义的样式会对前面定义的样式进行重写，在浏览器中看到的效果是使用最后一次设置的样式。CSS是一种表现语言，是对网页结构语言的补充。CSS主要用于网页的风格设计，包括字体，颜色，位置等方面的设计。在HTML网页中加入CSS，可以使网页展现更丰富的内容。

CSS样式单的使用方式：

CSS样式单可增强HTML文档的显示效果，为了在HTML中使用CSS样式单，通常有以下4种方式。

*引入外部样式文件：通过<link>元素引入外部样式文件。

<link type="text/css" rel="stylesheet" href="CSS样式文件的URL" />

*导入外部样式文件：通过<style>元素使用@import导入。

<style type="text/css"> @import"CSS样式文件的URL";</style>

*使用内部样式定义：直接将CSS样式单写在<style>元素中作为元素的内容。

<style type="text/css">
    div{
        background-color:#336699;
        width:400px;
        height:400px;
        }
</style>

*使用内联样式定义：将CSS样式单写到元素的通用属性style中。

<div style="background-color:#336699;width:400px;height:400px;">

CSS的两个特性：

CSS的第一个特性是“叠加”，也就是说，一个HTML文档可能会使用多种CSS样式单，细化到某元素来说，会层叠多层样式单，但生效的总会有一个顺序，即样式生效的优先级如下：

内联样式-->内部样式-->外部样式-->浏览器默认效果。

CSS的第二个特性是“继承”，继承指的是特定的CSS属性可以从父元素向下传递到子元素。

CSS的基本语法：

CSS由两部分组成：

selector{property1:value1;property2:value2;property3:value3;...}

其中，selector被称为选择器，选择器决定了样式定义对哪些元素生效。property:value被称为样式，每一条样式都决定了目标元素将会发生的变化。

CSS的选择器：

CSS选择器用于指明样式对哪些元素生效。需要明确的是，一个选择器可能会出现

元素选择器：

元素选择器是最简单的选择器，选择器通常是某个HTML元素，如p,h1,em,a,甚至可以是HTML本身。其写作格式如下：

E{property1:value1;property2:value2;property3:value3;...}

代码样式和效果图如下：

 通配符选择器：

通配符选择器（Universal Selector）也是一种简单选择器，用“*”表示，一般称之为通配符，表示对任意元素都有效。其写作格式如下：

*{property1:value1;property2:value2;property3:value3;...}

代码样式和效果图如下：

 id选择器：

id选择器可以为标有特定id的值HTML元素指定样式。其写作格式如下：

E#idValue{property1:value1;property2:value2;property3:value3;...}

代码样式和效果图如下：

 类选择器：

类选择器可以为指定class的HTML元素指定样式。其写作格式如下：

E.classValue{property1:value1;property2:value2;property3:value3;...}

代码样式和效果图如下：

属性选择器：

对带有指定属性的HTML元素设置样式。从广义的角度来看，元素选择器是属性选择器的特例，是一种忽视指定HTML元素的属性选择器。其写作格式如下：

E[attribte]{property1:value1;property2:value2;property3:value3;...}

语法	含义
E[attribute]	用于选取带有指定属性的元素
E[attribute=value]	用于选取带有指定属性和指定值的元素
E[attribute~=value]	用于选取属性值中包含指定值得元素，该值必须是整个单词，可以前后有空格
E[attribute|=value]	用于选取带有以指定值开头的属性值的元素，该值必须是整个单词或者后面跟着连字符“-”

以及下列一些选择器：

派生选择器/上下选择器，子元素选择器，相邻兄弟选择器，伪类选择器，伪元素选择器。

CSS的属性：

CSS背景选择器：

background-color:用于设置背景颜色，初始值为transparent（透明色）。

background-image:用于设置元素的背景图片，默认值为none（不显示背景图片）。

background-repeat:默认值为repeat,即图像沿着x轴和y轴平铺。

background-attachment:用于设置背景图像是否固定或者随着页面的其余部分滚动。

background-position:用于设置图像原点的位置。

CSS字体属性：

font-family:用于设置元素的字体，该元素属性值一般可以设置多个字体。

font-size:用于设置字体的尺寸。

font-style:用于设置字体是否是斜体，默认值为normal，显示效果为标准效果。

font-variant:用于设置字体使用小写字体，默认值为normal。

font-weight:用于设置字体的粗细，默认值为normal。

CSS文本属性:

color:用于设置文本的颜色。

direction:用于设置文本的方向。

letter-spacing:用于设置字符间隔的大小，默认值为normal。

line-height:用于设置行高，默认值为normal。

text-align:用于设置元素中文本的水平对齐方式，它的属性值主要有left（左对齐），right（右对齐），center（居中），inherit。该属性默认值受direction影响，如果direction属性是ltr，则默认值是left；如果direction是rtl，则默认值是right.

text-decoration:用于为文本添加装饰。

代码样式和效果图如下：

text-indent:用于设置文本块首行文本的缩进。

text-shadow:用于设置文本的阴影，普通文本默认是没有阴影的。

text-transform:用于设置文本的大小写。

white-space:用于设置元素内部的空白，它的属性值可以是normal（空白会被浏览器忽略）。

white-spacing:用于设置单词间的间隔，它的属性只能为normal或者一个长度值。

CSS浮动属性：

float:控制元素是否浮动，以及如何浮动。

代码样式和效果图如下：

clear:用于设置元素哪一侧不允许出现浮动，属性值可以是none（默认值），left（左侧不允许出现浮动），right（右侧不允许出现浮动），和both（两侧都不允许出现浮动元素）。

clip:控制对元素裁剪。

overflow:用于设置元素不够容纳内容的显示方式。

display:用于设置元素如何显示，它的属性值主要有以下几种。

*none:该元素不会被显示，通常用于预先做好，动态显示。

*block:该元素将显示为块级元素,元素前后会有换行符,可以设置它的宽高和上右下左的内外边距。

*inline:改元素会被显示为内联元素。

CSS定位属性：

position:用于设置元素的位置方式，它的属性值可以设置为以下几种。

*static:默认值，没有定位，元素将出现在正常的位置，这种方式将会忽略top,right,bottom,legt,z-index属性。

*absolute:生成绝对定位的元素。

*relative:生成相对定位的元素。

代码样式和效果图如下：

 z-index:用于设置目标对象的定位层次，数值越大，所在的层级越高，覆盖在其他层级之上，该属性仅在position:absolute时有效。其默认值是auto,堆叠顺序与父元素相同。

代码样式和效果图如下：

小结： 

本篇文章介绍了CSS是什么，CSS选择器，以及CSS属性，如有不解一起探讨。