CSS基础教程要点笔记

最新推荐文章于 2023-02-02 19:07:15 发布

weixin_33774883

最新推荐文章于 2023-02-02 19:07:15 发布

阅读量72

点赞数

原文链接：http://www.cnblogs.com/tsembrace/p/7859715.html

版权

1、CSS：Cascading Style Sheet（层叠样式表）。

2、CSS语法规则：

（1）两个主要部分构成：选择器，以及一条或多条声明。

选择器即是指向了需要定义样式的HTML元素；声明则由一个属性及其对应的值组成。

selector {property: value}

如果声明中不止一个，则需要用分号将每个声明分开。

p {
    text-align:center;
    color:red;
}

如果多个选择器可有同一个样式描述，则可以分组一起声明，并且用逗号将多个选择器分开。

h1,h2,h3,h4,h5,h6 {
    color: green;
    font-family: Verdana;
}

3、派生选择器

li span{
    color:blue;
}

<p><span>我不是蓝色</span></p>
<ul>
    <li>我也不是蓝色</li>
    <li><span>我是蓝色</span></li>
</ul>

样式仅对于li中的span标签生效。

4、id选择器、类选择器、属性选择器

（1）HTML文件中可以为某个标签元素指定id属性，并且这个属性值只属于该元素所有，即在HTML文件中只能有一个同id的元素。CSS中可以通过“#”引用指定该id。

HTML文件中也可以为某个或多个元素指定class属性，CSS中可以通过“.”引用指定该类元素。

#header {
    font-size:30px;
    text-align:center;
    color:#000;     
}
.setred{
    color:red;
}
.setblue{
    color:blue;
}

<div id="header">
    <p>Header</p>
</div>

<div>
    <p class="setred">p1</p>
    <p class="setblue">p2</p>
    <p class="setred">p3</p>   
</div>

（2）CSS中也可以为拥有指定属性的HTML元素设置样式，但只有在规定了!DOCTYPE时，对IE7以上的浏览器才可以。

[title]{
    color: red;
}                       /*只对带有title属性的元素有效*/

<p  title="pppp">CSS有效</p>
<a href="http://sina.com>CSS无效</a>
<span title="ssss">CSS有效</span>

属性选择器也可以匹配属性值来进行设置样式：

[title=W3School]{
    border:1px solid blue;
}

也可以匹配多个属性值，下例为title属性中包括了hello的元素设置样式：

[title~=hello]{
    color:red;
}

<h1>可以应用样式：</h1>
<h2 title="hello world">Hello world</h2>
<p title="student hello">Hello W3School students!</h1>
<hr />

<h1>无法应用样式：</h1>
<h2 title="world">Hello world</h2>
<p title="student">Hello W3School students!</p>

<!DOCTYPE HTML>
<html>
<head>
  <style type="text/css">
  [title~=sanwen]{
    background-color:#ccc;
    border:1px solid green;
    padding:10px;
  }
  </style>
</head>
<body>
  <p title="hello sanwen">凡是不押韵、不重排偶的散体文章，概称散文。随着文学概念的
    演变和文学体裁的发展，散文的概念也时有变化，在某些历史时期又将小说与其他抒情、记事
    的文学作品统称为散文，以区别于讲求韵律的诗歌。现代散文是指除小说、诗歌、戏剧等文学
    体裁之外的其他文学作品。其本身按其内容和形式的不同，又可分为杂文、小品、随笔等。
  </p>
</body>
</html>

为表单设置样式：

input[type="text"]
{
  width:150px;
  display:block;
  margin-bottom:10px;
  background-color:yellow;
  font-family: Verdana, Arial;
}

input[type="button"]
{
  width:120px;
  margin-left:35px;
  display:block;
  font-family: Verdana, Arial;
}

5、CSS创建

（1）外部样式表

建立一个cs文件（扩展名为css），然后在HTML文件中通过头部中link标签引用：

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

(2)内部样式表

在HTML头部中通过style标签设置：

<head>
<style type="text/css">
    p{..}
    span{..}
}
</head>

（3）内联样式

在需要设置样式的元素中直接通过style设置：

<p style="text-align:center;color:#ccc">
   text
</p>

转载于:https://www.cnblogs.com/tsembrace/p/7859715.html

weixin_33774883

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS基础教程要点笔记

1、CSS：Cascading Style Sheet（层叠样式表）。2、CSS语法规则：（1）两个主要部分构成：选择器，以及一条或多条声明。选择器即是指向了需要定义样式的HTML元素；声明则由一个属性及其对应的值组成。selector {property: value}如果声明中不止一个，则需要用分号将每个声明分开。p { text-align:ce...
复制链接

扫一扫