Web前端學習筆記之CSS基礎知識 -

zxq1007097830

浏览: 7924 次
性别:
来自: 上海

最近访客更多访客>>

ph7.3

tj05214

specterxu

wd1282988143

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

Web前端學習筆記之CSS基礎知識

博客分类：

Web前端學習筆記之CSS

CSS基础知识学习CSS的基本内容

一、CSS介紹

1、CSS是指层叠样式表（Cascading Style Sheets）。一般情况下，样式通常存储在样式表中，而外部样式通常存储在CSS文件中，并且多个样式定义可层叠为一。

2、CSS可以解决以下几个问题：

（1）定义如何显示HTML元素；

（2）解决内容与表现分离的问题；

（3）提高工作效率。

二、CSS的基本语法

CSS的构成

CSS主要是由选择器，以及一条或者多条声明构成。

即：选择器{ 声明1，声明2，...，声明N } （其中选择器通常是需要改变样式的HTML元素，声明是由属性和值构成，中间用冒号隔开）

例如：h1 {color:red; font-size:14px;} 或 h1{

color:red;

font-size:14px;

}

注意：（1）若值为多个单词，则要给值添加双引号；

（2）css对大小写不敏感，为了容易编译，通常会在“：”和值之间加入空格，因为空格不会影响css实现效果；

三、CSS选择器

CSS选择器大致可以分为：派生选择器、id选择器、类选择器、属性选择器。

1、派生选择器

通过依据元素在其上下文之间的位置关系来定义样式。

比如有一段html代码：

<p><strong>我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用</strong></p>
<ol>
<li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li>
<li>我是正常的字体。</li>
</ol>

我希望将代码中的<li><strong>标签之间的代码，变为斜体字，可以这样定义：

li strong{
       font-style:italic;//字体样式：斜体字
       font-weight:normal;字体的粗细：正常
    }

2、id选择器

id选择器可以为标有特定id的HTML元素指定特定的样式，以“#”号来定义。

例如下面的html代码：

<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>

将id=“red”的p元素改为红色，将id="green"的p元素改为绿色

#red {
color:red;
  }
#green {
color:green;
}

id选择器也可以和派生选择器一起使用，例如：

#sidebar p {
	font-style: italic;
	text-align: right;
	margin-top: 0.5em;
	}

注意：id属性只能在每个html中出现一次

3、类选择器

在CSS中，类选择器以一个点号显示

例如下面的html代码：

<h1 class="center">
This heading will be center-aligned
</h1>
<p class="center">
This paragraph will also be center-aligned.
</p>

定义类选择器：

.center {
 text-align:center; 
}

类选择器也可以被用做派生选择器，例如：

.fancy td {
	color: #f60;
	background: #666;
	}

4、属性选择器

对带有指定属性的html元素设置样式。

例如对下面的html代码：

<h1>可以应用样式：</h1>
<h2 title="Hello world">Hello world</h2>
<a title="W3School" href="http://w3school.com.cn">W3School</a>

设置样式：

[title]
{
color:red;
}

还可以扩展为属性和值选择器等，如

[title=w3school]
{
color:red;
}

四、CSS的引用

引用样式表的方法有三种：内部样式表、外部样式表、内联样式

1、内部样式表

<head>
<style type="text/css">
//css代码段
</style>
</head>

2、外部样式表

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

其中：rel表示当前文档和被链接文档之间的关系，href指定被连接文档的地址，格式为“.css”

3、内联样式表（一般不使用）

<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>

如此，将样式写在标签里

注意：html文档中，内部样式表和外部样式表同时存在的话，会以内部样式表为主，外部样式表为辅。

五、CSS样式

CSS样式分为：背景、文本、字体、链接、列表、表格、轮廓

六、CSS框模型（盒子模型）

分为：内边距、外边距、边框、外边距合并

七、CSS定位

分为：相对定位、绝对定位、浮动

分享到：

Java學習筆記之JDK | JS日期相加減函數整理

2017-02-08 16:28
浏览 290
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

Web前端學習筆記之CSS基礎知識

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

Web前端學習筆記之CSS基礎知識

评论

发表评论

相关推荐

最近访客更多访客>>