css基础和心得(一)

css开始

p{

font-size:12px;

color:red;

font-weight:blod

}

p为选择符p{}又称选择器,指明网页中要应用样式规则的元素。属性和值之间用

":"分隔。注意:最后一条声明可以没有分号,但是为了以后修改方便,一般也加

上分号;为了使用样式更加容易阅读,可以将每条代码写在一个新行内。

css样式分为:内联式、嵌入式和外部式

内联式:css样式表就是把css代码直接写在现有的html标签中,如:

<p style="color:red">这里的文字是红色。</p>

注意要写在元素开始的标签里面,写后面是错误的。如:

<p>这里是红色</p style="color:red">

并且css样式代码要写在style=""双引号中,如果有多条css样式代码设置可以写

在一起,中间用分号隔开。如:

<p style="color:red;font-size:12px">这里文字是红色</p>

嵌入式:就是可以把css样式代码写在<style type="text/css"></style>标签之

间。如:

<style type="text/css">

span{

color:red;

}

</style>

嵌入式css样式必须写在<style></style>之间,并且一般情况下嵌入式css样式写

在<head></head>之间。

外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中,这个

css样式文件以".css"为扩展名,在<head>内(不是在<style>标签内)使用<link>

标签将css样式文件链接到html文件内。如:

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

注意:1.css样式文件名称以有意义的英文字母命名,如main.css

2.rel="stylesheet" type="text/css"是固定写法不可修改

3.<link>标签位置一般写在<head>标签内

优先级为:内嵌式>嵌入式>外部式 当然 也是需要视情况而定

嵌入式>外部式有个前提:嵌入式css样式的位置一定在外部式的后面。如:

<link href="style.css"...>代码在<style type="text/css">...</style>代码

的前面。总结来说就是就近原则(离被配置元素越近优先级别越高)

以上的优先级是有一个前提:内联式、嵌入式、外部式样式表中css样式是在的相

同权值的情况下。后面我会说什么是权值。

每一条css样式声明(定义)由两部分组成,形式如下:

选择器{

样式;

}

在{}之前的部分就是"选择器","选择器"指明了{}中的"样式"的作用对象,也就是

"样式"作用于网页中的哪些元素。

标签选择器其实就是html代码中的标签。如:<html>、<body>、<h1>、<p>、<img>

如:p{font-size:12px;line-height:1.6em;}

上面的css样式代码的作用:为p标签设置12px大小的字号,行间距设置1.6em的样

类选择器在css样式编码中是最常用到的。

语法:.类选择器名称{css样式代码;}

注意:1.英文圆点开头 2.其中类选择器名称可以任意起名(不要起中文噢)

使用方法:第一步:使用合适的标签把要修饰的内容标记起来,如下:

<span>胆大包天</span>

第二步:使用class="类选择器名称"为标签设置一个类,如下:

<span class="stress">胆大包天</span>

第三步:设置类选择器css样式,如下:

.stress{color:red;}/*类前面要加入一个英文圆点*/

在很多时候,id选择器都类似于类选择器,但是也有一些重要的区别:

1.为标签设置id="id"名称,而不是class="类名称"

2.id选择符的前面是#号而不是英文圆点.

学习了类选择器和id选择器之后感觉两者有很多相似之处,是不是可以通用呢?

相同点:可以应用于任何元素

不同点:1、id选择器只能在文档中使用一次,与类选择器不同,在一个html文档

中。id选择器只能用一次,而且仅有这么一次。可是类选择器可以使用很多次。

2、可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个

元素同时设置多个样式,但只可以用类选择器的方法实现,id选择器不可以的。

(不能使用id词列表)。

说简单点,就是你们不要特么的用id了,就用class吧!就用类选择器,不要特么

的用id了!

子选择器即大于符号(>),用于选择指定标签元素的第一代元素。这个就是用来框

一个框框的~~~

包含选择器,即加入空格,用于选择指定标签元素下的后辈元素。如:

.first span{color:red;}看清楚中间有个空格!

请注意这个选择器与子选择器的区别,子选择器仅指它的直接后代,或者你可以

理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素。后

代选择器通过空格来进行选择,而子选择器通过">"进行选择。

总结:>作用于元素的第一代后代,空格作用于元素的所有后代。

通用选择器是功能最强大的选择器,它使用一个(*)号指定,它的作用是匹配html

中任意标签元素字体颜色全部设置为红色:*{color}

伪类选择符是一个很有意思的选择符,它允许给html不存在的标签(标签的某种

状态)设置样式,比如我们给html中一个标签元素的鼠标滑过的状态来设置字体

颜色:a:hover{color:red;}

上面一行代码就是为a标签鼠标滑过的状态设置字体颜色变红。这样就会使文字加

入鼠标滑过字体颜色变为红色特效。

分组选择符:当你想为html中多个标签元素设置同一个样式时,可以使用分组选

择符(,)/*看清楚!这里是逗号!!!*/

例如:h1,span{color:red;font-size:20px;}

时间: 2024-10-28 19:18:36

css基础和心得(一)的相关文章

css基础和心得(四)

现在来说相对定位: 如果想为元素设置层模型中的相对定位,需要设置position:relaive(表示相对 定位),它通过left.right.top.bottom属性确定元素在正常文档流中便宜位 置.相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像 层一样浮动了起来),然后相对于以前的位置移动,移动的方向和幅度由left.right. top.bottom属性确定,偏移前的位置保留不动.那么,什么叫"偏移前的位置保 留不动呢?"就是div元素相对于以前

css基础和心得(二)

css中的某些样式是具有继承性的.它允许样式不仅应用于某个特定html标签元素 而且应用于其后代.如: p{color:red;}  <p>dsffd<spans>sdfasdf</span>sd</p> 注意有些css样式是不具有继承性的.如border:1px solid red;这里的设计很合理 css有个特殊性,标签的权值为1,类选择符的权值为10,id选择符的权值最高为1 00. 注意,还有一个权值比较特殊,继承.继承也有权值但是它是最低的. 突然

蓝鸥零基础学习HTML5—html+css基础

蓝鸥零基础学习HTML5-html+css基础 一.课程目标 1.了解前端开发职位:2.掌握常用标签以及语义及用法:3.掌握常用css的特性,掌握基础布局技巧:4.掌握整站规划概念. 二.适用人群 零基础积极学习html5者 三.课程简介 本课程主要讲解了 html+css的基础知识,包括html模板.标签.css基础样式.布局.表格表单.整站等等,是进行前端开发的基础.Html+css是前端开发的基础,大部分前端开发工程都需要从html+css布局开始,html+css的基础非常重要,是前端开

HTML&CSS基础学习笔记8-预格式文本

<pre>标签的主要作用是预格式化文本.被包围在 pre 标签中的文本通常会保留空格和换行符.而文本也会呈现为等宽字体. <pre>标签的一个常见应用就是用来表示计算机的源代码.当然你也可以在你需要在网页中预显示格式时使用它. 会使你的文本换行的标签(例如<h>.<p>)绝不能包含在 <pre> 所定义的块里.尽管有些浏览器会把段落结束标签解释为简单地换行,但是这种行为在所有浏览器上并不都是一样的. 更多学习内容,就在码芽网http://www.

前端知识学习一 :CSS基础

一.CSS概述 css指的是层叠样式表,样式定义如何显示HTML元素,样式通常存储在样式表中, 把样式添加到HTML4.0中,是为了解决内容和表现分离的问题.外部样式表通常存储在css文件     中.多个样式定义可层叠为一. 二.层叠次序 一般而言,所有的样式都会根据下面的规则层叠于一个新的虚拟样式表中,其中4拥有最高的优先权. 1.浏览器的缺省设置 2.外部样式表(通过引入的外部.css文件) 3.内部样式表(位于<head>标签内部) 4.内联样式表(在HTML元素内部) 因此属性的优先

Form标签+Css基础

一.Form表单标签 <form action="" method=""></form> 表单就是用来将用户的信息提交到服务器,服务器会将信息存储或者根据信息查询数据(增删改查). 表单中所有的内容都要写在form标签中. <input type="text" value="哈哈哈哈" placeholder="请输入用户名"> Input文本输入框,type类型为tex

HTML&CSS基础学习笔记13—无序列表

无序列表 有时我们的工作繁忙,杂事很多,怕忘记,就会把事情一件件列出来,防止忘记. 它们的排列顺序对于我们来说并不重要,可以随意调换,我们将它称为无序列表,HTML里用<ul>标签来表示无序列表,列表里的项目则用<li>标签来表示: 1 2 3 4 5 <ul>     <li></li>     <li></li>     ... </ul> 看一段实例代码: 对于的浏览器显示结果是这样的: 更多内容学习,请

前端开发:css基础知识之盒模型以及浮动布局。

前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西?  为什么这个浮动没有效果?  这个问题楼主已经回答了n遍.今天则是把它写到我的博客中,想知道自己过来翻就好啦 ^_^  下面楼主把当前的自己对css的基础认知一一给大家道来...... 盒模型 谈到盒模型,有经验的小伙伴一定滚瓜烂熟,无非就是 内容(content).填充(padding).边框(border).边界(margin): 这些属性我们可以把它转移到我们

css基础学习

1.css基础语法 Css规则由两个主要的部分组成:选择器,声明. Selector{declaration1;...declarationN;} 如: H1 { font-size : 32px; color : blue } H1:选择器 Font-size:32px,color:blue:声明 2.css的三种定义方法 内联式: <h1 style="font-size:20px;color:red">内联式</h1> 嵌入式: <style typ