码迷,mamicode.com
首页 > Web开发 > 详细

CSS基础教程要点笔记

时间:2017-11-19 15:37:46      阅读:217      评论:0      收藏:0      [点我收藏+]

标签:tle   border   inpu   html   指定   title   标签   enter   式表   

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>

为表单设置样式:

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="stylesheet">
    p{..}
    span{..}
}
</head>

(3)内联样式

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

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

 

CSS基础教程要点笔记

标签:tle   border   inpu   html   指定   title   标签   enter   式表   

原文地址:http://www.cnblogs.com/tsembrace/p/7859715.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!