网站首页 > 知识剖析正文

Web前端开发-CSS入门干货01

nixiaole 2024-11-24 19:54:56 知识剖析 19 ℃

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>

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

上一篇： html开发笔记06- 字体标签和文字标签
下一篇：第六次记录，利用CSS调整样式位置

网站首页 > 知识剖析 正文

Web前端开发-CSS入门干货01

1.CSS是什么

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

3.CSS的使用方式

猜你喜欢

网站首页 > 知识剖析正文