CSS基础样式

CSS基础样式

CSS指层叠样式表，它作用是控制页面内容的外观。这样就可以将网页的内容和表现形式分离。层叠的意思是 如果选择器的权重相同，则后面元素的样式会覆盖前面样式。

样式表的组成

CSS样式表由选择器和声明两个部分组成，其中选择器是通过名字来标识元素的，声明用于定义元素的样式。

a{color:red;声明2;声明3}

样式表比较常见的有三种引入方式
1.行内样式

<p style="color:red">你好</p>

2.内部样式表

 <style>
    p{color:red}
 </style>

3.外部样式表

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

如果这三种方式都对某个内容增加了样式，则优先级顺序是行内样式表>内部样式表>外部样式表

样式表的基础选择器

CSS选择器十分丰富，大致可以分为如下几类，基础选择器，关系选择器，属性选择器，伪类选择器，伪对象选择器。
CSS基础选择器
1.ID选择器

#id名称{属性名：属性值；}

2.class选择器

.class名称{属性名：属性值；}

3.标签选择器

标签名{属性名：属性值；}

优先级 ID选择器>class选择器>标签选择器>*

样式表常用样式

1.color 字体颜色
可以使用名称，RGB，RGBA，十六进制来指定字体颜色
颜色名称：{color:red;}
RGB:{color:rgb(1,1,1);} 即代表红绿蓝以这三种颜色拼出来。
RGBA:{color:rgba(1,1,1,0.5);} 前面三个和rgb一样，最后一位代表透明度。
十六进制：{color:#ff0000;}
2.font-family 字体样式
3.text-align 文字内容靠左，居中，靠右
4. background-color 背景色，默认是透明。如果同时设置背景图片，背景图片将覆盖背景色之上
5. background-image 背景图片，通过url指定图片

 <style>
     body{background-image:url("img/aa.jpg")}
 </style>

6.background-repeat 背景图片是否重复，默认值repeat
属性值reapeat-x图片在横向上平铺， reapeat-y图片在纵向上平铺，no-repeat不重复平铺
7.background-size 背景图片大小，默认值（auto）真实大小

.img{background-size:100px 100px}

前面是宽后面是高，只设置宽高度会自动匹配
8.background-position 相较于外部容器，背景图片的位置。默认值0% 0%相较于left和top
9.font-style 文本的字体样式（正常或者斜体）
默认值normal 正常
italic 斜体
10.font-weight 字体的粗细
默认值normal 正常
lighter 细体效果和normal一样
bold 粗体
bolder 也是粗体
数字也可以表示粗细，范围100~900

{font-weight:lighter;}
{font-weight:600}

11.font-size 字体的大小
通常通过像素指定字体大小

{font-size:20px;}