css基础-1

css简介

一、CSS 指层叠样式表

样式定义如何显示 HTML 元素

样式通常存储在样式表

把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题

外部样式表可以极大提高工作效率

外部样式表通常存储在 CSS 文件

多个样式定义可层叠为一

CSS 可以通过以下方式添加到HTML:

1.内部样式:

行内样式

嵌入样式

2.外部样式

1)行内样式- 在HTML元素中使用"style" 属性

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

     

2)嵌入样式-在HTML文档头部 <head> 区域使用<style> 元素 来包含CSS

<head>

<style type="text/css">

body {background-color:yellow;}

p {color:blue;}

</style>

</head>

 以上是直接给元素定义css

         

(1、通过选择器来调用css

定义方式有两种:id选择器和class选择器

       例子1id选择器                    调用

           #id名字 {属性:值}          <标签 id="刚才定义的id名字">

#pang {clor:red}           <p id="pang">

例子2 class选择器                 调用

.名字 {属性:值}              <标签 clas="刚才定义的id名字">

.pang {color:red}          <p class="pang">

     这两种调用可以使用在内部样式表和外部引用中

    

     

3)外部引用 - 使用外部 CSS 文件

<head>

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

     </head>

 最好的方式是通过外部引用CSS文件.

CSS样式表优先顺序

ID选择器>类选择器>标签选择器

    选择器类型相同时,按照代码应用顺序,后应用的样式覆盖先应用的样式

    CSS行内样式在所有样式表中优先级最高

 

二、css语法格式

1、CSS 规则由两个主要的部分构成:1)选择器,(2)以及一条或多条声明:

(1)选择器通常是:您需要改变样式的 HTML 元素。(也就是标签)

(2)每条声明:由一个属性和一个值组成。

属性(property)是您希望设置的样式属性(style attribute)。每个属性有一个值。属性和值被冒号分开。

CSS声明总是以分号;结束,声明组以大括号{}括起来:

例子:

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

         

    如果属性值有两个单词以上,需要""扩起来

   比如: a {color:"red asd"}  

2css注释

/*   注释内容  */

三、css常用属性

(1)height: 表示高度

(2)width: 表示宽度

(3)background : 表示背景

背景属性(背景图片)例子:

 {backgrouund:blue url(1.png) no-repeat X轴位置 Y轴位置;}

      blue背景颜色

      no-repeat:表示背景图片不重复显示

      XY轴可以用像素来表示:比如100px 200px

     center:表示居中

     fixed:这个值表示固定背景图片,图片不会随着滚动条的下拉而消失。也就是说始 终在屏幕上。

 

时间: 2024-10-29 00:35:15

css基础-1的相关文章

蓝鸥零基础学习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

Html5开发——html+css基础二(个人博客一)

今天没有写完,而且写的还有点问题,所以今天就先不上传代码了(ps:快写完了才发现布局有问题,导致代码太多,感觉写的不是很好,所以今天先分析一下布局) 第一步先写一个大的div用来放ABC三个部分,这个大的div居中! 第二步分别写ABC三个部分,ABC三个部分分别使用浮动(float)来定位.A和B都各使用了一张非常小的图片,通过重复(repeat)属性生成A和B 第三步C部分分别写好3~16这几个模块,在通过组合利用浮动定位.分组如下: E:3 F:4.7.10.13 G:5.8.11.14

Html5开发——html+css基础一(百度首页)

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>百度</title> <style type="text/css"> *{margin: 0;padding: 0;} body{text-align: center;} .header{text-align: right;f

CSS基础教程 -- 媒体查询屏幕适配

响应式布局 Media Query 的使用方法 在上例中, 我们使用Media Queries来根据3种不同尺寸的窗口使用3种不同的样式.通过不同的媒体类型和条件定义样式表规则,媒体查询让CSS可以更精确作用于不同的媒体类型和同一媒体的不同条件.媒体查询的大部分媒体特性都接受min和max用于表达"大于或等于"和"小与或等于".如:width会有min-width和max-width媒体查询可以被用在CSS中的@media和@import规则上,也可以被用在HTML