CSS基础样式

CSS基础样式

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

样式表的组成

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

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

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

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

2.内部样式表

 <style>
    p{color:red}
 style>

3.外部样式表

"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;}

你可能感兴趣的:(WEB前端)