CSS基本属性的用法

web前端开发 - 2 CSS基本属性的用法

1、CSS简介

英文全名:cascading style sheets

定义: 层叠样式表, 是WEB标准中的表现标准语言, 表现标准语言在网页中主要对网页信息的显示进行控制,简单说就是如何修饰网页信息的显示样式。

目前推荐遵循的是W3C发布的CSS3.0.
用来表现XHTML或者XML等样式文件的计算机语言。

1998年5月21日由w3C正式推出的css2.0

2.css语法

CSS语法:选择符{属性:属性值;属性:属性值;}

属性 属性值 功能
text-align center, left, right 文字居中格式
font-size 18px 设置文字大小
font-family 微软雅黑, 宋体等 设置字体
font-weight normal(默认), bold(粗体), 100px ,等 设置字体加粗
font-style normal(默认), italic(斜体) 设置字体样式
color 颜色值 设置文字颜色
background-color 颜色值 设置背景颜色

3.样式的创建

(1) 内部样式:


    

(2) 外部样式:

第一种:

    


rel(relation):用于定义文档关联,表示关联样式表;
type:定义文档类型

第二种:

    

注意:a.  @和import之间没有空格 url和小括号之间也没有空格;必须结尾以分号结束
    b.  @import是CSS2.1提出的,所以老的浏览器不支持,@import只有在IE5以上的才能识别,而link标签无此问题。

(3)内联样式:

语法:<标签 style="属性:属性值;属性:属性值;">

4.样式表的优先级

A、内联样式表的优先级别最高
B、内部样式表与外部样式表的优先级和书写的顺序有关,后书写的优先级别高。

5.css选择器

序号 选择器 语法
1 标签选择器 标签名称{属性:属性值;}
2 id选择器 #id名{属性:属性值;}
3 class选择器 .class名{属性:属性值;}
4 通配符 *{属性:属性值;}
5 群组选择器 选择符1,选择符2,选择符3{属性:属性值;}
6 包含选择器 选择符1 选择符2{属性:属性值;}
7 伪类选择器 如下 : 注意3

注意1: class选择器 定义类名称要规范: 如下表格是常见的命名:

部位 命名
header
内容 content
footer
导航 nav
侧边栏 sidebar
标志 logo
广告 banner
页面主体 main

注意2 : 包含选择器选择符之间是用空格隔开,并且选择符1>大于选择符2;
而群组选择器选择符之间是用逗号隔开.

注意3. 伪类选择器

语法 :
a:link{属性:属性值;}超链接的初始状态;
a:visited{属性:属性值;}超链接被访问后的状态;
a:hover{属性:属性值;}鼠标悬停,即鼠标划过超链接时的状态;
a:active{属性:属性值;}超链接被激活时的状态,即鼠标按下时超链接的状态;

例如:
a:hover{color: red;}
a{text-decoration: none;}   /*去掉超链接的下划线*/

6.css选择器的权重

css中用四位数字表示权重,权重的表达方式如:0,0,0,0
标签选择器的权重为0001
class选择器的权重为0010
id选择器的权重为0100
伪类选择器的权重为0001 
包含选择器的权重:为包含选择符的权中之和
内联样式的权重为1000
!important 语法是提升指定样式条目的应用优先权

7.浮动属性的应用

A. 语法: float : none / left / right ;

B. float: 定义网页中其它文本如何环绕该元素显示

C. 浮动的目的: 就是让竖着的东西横着来

D. 浮动的三个取值:

left:元素活动浮动在文本左面
right:元素浮动在右面
none:默认值,不浮动。

E. 清除浮动的三种方法 :

a. 语法:.clear{clear:both;} 不常用

b. 语法:.clear{overflow:hidden;} 不建议使用

c. 语法:最流行、最常用、可兼容所有浏览器 , 开发时推荐使用

clear:after{
    display:block;
    clear:both;
    content:".";
    visibility:hidden;
    height:0;}
clear{zoom:1;} 

牢记:对于CSS的清除浮动(clear),这个规则只能影响使用清除的元素本身,不能影响其他元素

8.css文本属性

序号 功能 语法
1 文本大小 font-size : value
2 文本颜色 color : 颜色值
3 文本字体 font-family : 字体1,字体2,字体3
4 文字加粗 font-weight : bolder(更粗的) / bold(加粗)/ normal(常规)/100—900
5 文字倾斜 font-style:italic / oblique / normal(取消倾斜,常规显示)
6 水平对齐方式 text-align : left / right / center
7 文字行高 line-height : normal / value
8 文本修饰 text-decoration : none / underline(添加下划线) / overline / line-through
9 首行缩进 text-indent : value (例如: text-indent : 2em )
10 字间距 letter-spacing : value
11 a标签清除圆点 list-style: none
12 a标签清除下划线 text-decoration: none

注意: 文字属性可简写

font属性的简写:字号,行高,字体
font:12px/24px "宋体";
font-size:12px; line-height:24px; font-family:”宋体”;

说明:font的属性值应按以下次序书写(各个属性之间用空格隔开)
顺序: font-style font-weight font-size / line-height font-family

9.css列表属性

序号 功能 语法
1 定义列表符号样式 list-style-type:disc(实心圆) / circle(空心圆) / square(实心方块) / none(去掉列表符号);list-style-type : none===list-style : none;
2 使用图片作为列表符号 list-style-image:url(所使用图片的路径及全称);
3 定义列表符号的位置 list-style-position : outside(外边) / inside(里边);

10.css背景属性

序号 功能 语法
1 背景颜色 background-color : 颜色值 ;
2 背景图片的设置 background-image:url(背景图片的路径及全称);
3 背景图片平铺属性 background-repeat : no-repeat(不平铺)/repeat(平铺)/repeat-x(横向平铺)/repeat-y(纵向平铺) ;
4 背景图的固定 background-attachment : scroll(滚动) / fixed(固定) ;
5 背景图片的位置 background-position : left / center/right/(水平向上)或数值 top/center/bottom/(水平向下)或数值

11.css边框属性

序号 功能 语法
1 border : 边框宽度 边框风格 边框颜色 border : 5px solid red
2 边框圆角(倒角) border-radius : 25px
3 边框阴影 box-shadow : 10px 10px 5px #888888;
4 边框样式 border-style : solid(实线)/ dashed(虚线)
5 单独设置各边 border-top-style : dotted ; border-right-style : solid ; border-bottom-style : dotted ; border-left-style : solid;
6 边框宽度 border-width : 20px

补充 : 锚点链接

1.
HTML标签
2.

3.

4.回到顶部 执行效果: 点击4跳转到2, 点击1跳转到3

你可能感兴趣的:(CSS基本属性的用法)