前军教程网

中小站长与DIV+CSS网页布局开发技术人员的首选CSS学习平台

Web前端开发-CSS入门干货01(web前端开发基础知识)

1.CSS是什么

CSS:层叠样式表 ( Cascading Style Sheets ),其是用来静态地修饰网页,还可以配合脚本语言动态地对网页各元素进行格式化。

2.CSS的基本语法:选择器 {样式}

(1)选择器

1)选择器是什么

选择器是一种将根据不同需求将不同标签选择出来的语法表达。

2)选择器分类

分为:基础选择器和复合选择器

基础选择器有:标签选择器、类选择器、ID选择器和通配符选择器

a)标签选择器以标签名称作为选择器,为所有同一个标签设定相同样式。

标签选择器语法:直接为标签名称,其应用例子:

<!--  为所有p标签中内容设置为绿色 -->
p {color: green;}

b)类选择器以标签的类属性作为选择器,为所有有同一个类属性值设定相同样式。

类选择器语法:以点(.)开头,紧跟着类(class)属性的值,其应用例子:

<!--  为所有标签的类属性值为redxx的内容设置为绿色 -->
.redxx {color: green;}

<p  class="redxx">
        类选择器
</p>

类的属性值并不是唯一的,即可以用不同的标签拥有相同的类属性值。

高级用法:类属性可以有多个值,多个值之间用空格分隔,其应用例子:

<!--  为所有标签的类属性值为redxx的内容设置为绿色、为类属性值为fontsize35的内容设置为100px -->
.redxx {color: green;}
.fontsize35 {font-size:100px;}

<p  class="redxx  fontsize35">
        类选择器
</p>

c)ID选择器以标签的ID属性作为选择器,为有该ID属性值的内容设定样式。

类选择器语法:以#开头,紧跟着ID属性的值,其应用例子:

<!--  为ID属性值为idselector的内容设置为绿色 -->
#idselector {color: green;}

<p  id="idselector">
        ID选择器
</p>

ID的属性值是唯一的,不能出现两个一样的ID值。

d)通配符选择器(不常用)

(2)样式

1)样式是以健值对的形式出现,健值对以分号结尾,如: {属性:属性值 ;}

2)样式种类

a)字体系列,属性有:字体(宋体等)、字体大小、字体粗细、文字样式(斜体)

font-family、font-size、font-weight、font-style,字体系列的每种属性单独写法如上,

字体系列复合语法:font:font-style font-weight font-size/line-height font-family,其应用例子:

font:italic  700  16px   'Microsoft yahei' 

其中每个属性的顺序不能变,font-size和font-family必须要有。

b)文本系列,属性有:颜色、水平对齐、装饰文本(下划线、删除线、上划线)、文本缩进、行高

color、text-align、text-decoration、text-indent、line-height

注:行高=文本大小+上下间距

3.CSS的使用方式

(1)行内样式表

在HTML文件中,为标签添加style属性,如下:

<p style="color:green;">行内样式表</p>

(2)内部样式表

在HTML文件里,在head标签中,在style标签内进行设置CSS,如下:

<head>
    <style>
        body {background-color:#eeeedd;}
    </style>
</head>

(3)外部样式表

利用单独CSS文件为HTML提供样式,文件以.css作为后缀。外部样式表的引入,如下:

<head>
    <link  rel="stylesheet" href="all.css">
</head>


#学问分亨官##闪光时刻二期##闪光时刻第二期主题征文#

发表评论:

控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言