搜索
您的当前位置:首页正文

CSS基本语法(2)_html/css

2023-11-27 来源:欢乐泡美食网

CSS基本语法(2)

一、文本字体属性

1、 文本属性:line-height,text-align,letter-spacing,text-decoration,white-space

2、 字体属性:font,font-family,font-size,font-weight

 1 2 3  4 20 21 22 23 24 
  • CSS基本语法(2)
  • 25
  • 坚持不懈,努力学习CSS基本语法,为成为css高手而奋斗!
  • 26
  • CSS的文本属性
  • 27
  • 学习CSS的下一步,是要更努力的学习javascript!
  • 28
  • CSS的字体属性
  • 29 30 31 32

    二、背景属性

    背景属性参数: background、background-color、background-img、background-repeat、background-position

    1、background-repeat属性的取值:

    repeat 横向纵向同时平铺,默认值

    repeat-x 横向平铺

    repeat-y 纵向平铺

    no-repeat 背景图不重复平铺

    2、background-position属性的取值

    Xpos Ypos X表示水平方向 Y表示垂直方向(正值表示正向偏移,同时向下向左;负值表示反向偏移,同时向上向右)

    X% Y% 使用百分比表示背景出现的位置 (30% 50%垂直方向居中,水平方向偏移30%)

    X方向关键词 Y方向关键词 水平方向关键词left,center ,right 垂直方向关键词top,center,bottom

     1 2 3  4 10 11 12 13 this is a test of background !14 this is a test of background !15 this is a test of background !16 this is a test of background !17 this is a test of background !18 this is a test of background !19 20 21 

    三、列表常用属性

    1、list-style 属性用于定义列表项的各类风格,list-style属性取值说明如下:

    none 无修饰符

    disc 实心圆

    circle 空心圆

    square 实心正方形

    decimal 数字

    2、float 属性用于定义元素的浮动方向。

     1 2 3  4 13 14 15 16 17 
  • 铅笔
  • 18
  • 钢笔
  • 19
  • 水笔
  • 20
  • 毛笔
  • 21
  • 画笔
  • 22 23 24 25

    坚持每天进一步一点点,加油!

    小编还为您整理了以下内容,可能对您也有帮助:

    几种关于html和css的使用方法

    本文主要和大家介绍了几种关于html和css的使用方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧,希望能帮助到大家。

    HTML使用方法篇

    一:颜色代码

    如果你想使用某种颜色,取得它的颜色值即可。比如,您想改变某些文字的颜色,您可以使用下面的代码:<font color=#ffc060 size=2>改变#符号后的代码即可改变颜色</font>

    二:文字加粗 倾斜的代码

    ◆文字加粗的代码是: <b>你好</b> ◆文字倾斜的代码是: <i>你好!</i> ◆底线字:<u></u>

    三:文字链接代码

    如果您想点击某处文字会连接到另外一个网页的效果,这是超链接,代码是这样:

    <a href="网站地址";>共享空间</a>如果要点了这个文字以后重新打开一个窗口的话,代码是:<a href="网站地址";; target="_blank">共享空间</a>

    四:在网站上放图片的代码

    如果你看到一个好看的图片想放到网站上,代码是这样的:

    <img src="/Article/UploadFiles/200605/20060507081900201.gif"; width="150" height="100">

    后面的数字调节图片的尺寸大小。

    五:图片链接代码

    如果要点一下图片就能打开一个网站的链接代码是这样的:

    <a href="http://www.163.com/";><img src="/Article/UploadFiles/200605/20060507081900201.gif"; width="150" height="100"></a>

    如果要点一下图片就能打开一个网站的链接,并且重新打开一个窗口。代码是这样的:

    <a href="http://www.163.com/";; target="_blank"><img src="/Article/UploadFiles/200605/20060507081900201.gif"; width="150" height="100"></a>上面的数字都能调节图片尺寸大小。

    六:换行代码

    如果你想换行,直接用Enter键是不行的,需要在您想换行的位置输入<br>

    ,这样就会分成两行显示 ,整个网站看起来也不会是一大片了,而是段落分明。

    七:文字移动的代码是

    <marquee>这里写文字</marquee>

    八:移动图片的代码

    <marquee><img src="/Article/UploadFiles/200605/20060507081900241.jpg";><img src="/Article/UploadFiles/200605/20060507081900700.jpg";><img src="/Article/UploadFiles/200605/20060507081900831.jpg";><marquee>

    把里面的图片地址换成你的就行 想多放一个图片就按照格式在中间插入:

    <img src="/Article/UploadFiles/200605/20060507081900700.jpg";>

    里面的图片地址自己定。

    九:背景音乐的代码

    如果想在你的网站上放上一段好听的背景音乐,代码是: <bgsound src="http://xxxxx.com/xxx.mid";loop=10>

    <bgsound src="http://www.midifan.com/midi/music.ASP?id=3073";loop=30> 里面的背景音乐地址你能自己替换。

    前面的是音乐地址,一般都以mid或者mp3的形式结尾 后面的数字是播放次数。

    http://www.midifan.com/midi/

    这个网站都有好的背景音乐

    十:在网站中插入一个flash动画的代码是

    <embed width=200 height=200

    src="http://flash.shang.com/view/2/fff.swf";> 里面的动画地址换成你的.动画地址都要以swf的形式结尾。这点需要注意。

    十一:打开网站时候出现的欢迎词代码

    <body onLoad= alert("你好,欢迎访问本网站!")>

    十二:关闭网站的时候出现的话

    <body onUnload="window.alert('谢谢您的光临)">

    十三:打开网站的时候自己做一个弹出窗口的广告

    <script language="javascript">

    var TimerID=1;

    window.open('http://163.com'/;,'','width=600,height=300,left=100,top=50');

    </script>

    里面的 http://163.com/ 这个是你预先做好的一个网页,后面的数字是调节大小和位置的,你自己多试验几次。

    十四:鼠标感应字体变红色

    代码如下:插在<body></body>之间

    <STYLE type=text/css>TD {

    FONT-SIZE: 12px

    }

    BODY {

    FONT-SIZE: 12px

    }

    INPUT {

    FONT-SIZE: 12px

    }

    A:link {

    COLOR: #000000; TEXT-DECORATION: none

    }

    A:visited {

    COLOR: #000000; TEXT-DECORATION: none

    }

    A:active {

    COLOR: blue; TEXT-DECORATION: none

    }

    A:hover {

    COLOR: red; TEXT-DECORATION: underline

    } .so {

    BORDER-RIGHT: 1px ridge; BORDER-TOP: #ffffff 1px ridge; FONT-SIZE: 12px; BORDER-LEFT: #ffffff 1px ridge; BORDER-BOTTOM: 1px ridge; BACKGROUND-COLOR: #cccccc

    }

    </STYLE>

    十五:禁止他人复制你网页的代码:

    <body bgcolor="#ffffff"oncontextmenu="return false"onselectstart="return false">

    十六:把其它网页放入自已网页中的代码:

    <IFRAME name=smjh align=center src="../../这里换成你要放入网站的网址" frameBorder=0 width=760 scrolling=no height=300></IFRAME>

    网页中使用CSS样式表的五种方法

    一、使用STYLE属性

    将STYLE属性直接加在个别的元件标签里,<元件(标签) STYLE="性质(属性)1: 设定值1; 性质(属性)2: 设定值2; ...}

    例如:

    <TD STYLE="COLOR:BLUE; font-size:9pt; font-family:"标楷体"; line-height:150%>

    这种用法的优点 是可灵巧应用样式於各标签中,但是缺点则是没有整篇文件的『统一性』。

    二、使用STYLE标签

    将样式规则写在<STYLE>...</STYLE>标签之中。

    <STYLE TYPE="text/css">

    <!--

    样式规则表

    -->

    </STYLE>

    例如:

    <STYLE TYPE="text/css">

    <!--

    BODY {

    color: BLUE;

    background: #FFFFCC;

    font-size: 9pt}

    TD, P {

    COLOR: GREEN;

    font-size: 9pt}

    -->

    </STYLE>通常是将整个的 <STYLE>...</STYLE>结构写在网页的<HEAD> </HEAD>部份之中。这种用法的优点就是在於整篇文件的统一性,只要是有声明的的元件即会套用该样式规则。缺点就是在个别元件的灵活度不足。

    三、使用 LINK标签

    将样式规则写在.css的样式档案中,再以<LINK>标签引入。

    假设我们把样式规则存成一个example.css的档案,我们只要在网页中加入

    <LINK REL=STYLESHEET TYPE="text/css" HREF="example.css">

    即可套用该样式档案中所制定好的样式了。 通常是将LINK标签写在网页的<head></head>部份之中。这种用法的优点就是在於可以把要套用相同样式规则的数篇文件都指定到同一个样式档案即可。缺点也是在个别文件或元件的灵活度不足。

    四、使用@import引入

    跟LINK用法很像,但必放在<STYLE>...</STYLE> 中。

    <STYLE TYPE="text/css">

    <!--

    @import url(引入的样式表的位址、路径与档名);

    -->

    </STYLE>

    例如:

    <STYLE TYPE="text/css">

    <!--

    @import url(http://yourweb/ example.css);

    -->

    </STYLE>

    要注意的是,行末的分号是绝对不可少的!

    五、使用<span></span>标记引入样式

    例如:<span style="font:12px/20px 宋体 #000000;">网页教学网</span>

    Html/Css

    下面小编就为大家带来一篇Html/Css(新手入门第一篇必看攻略)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧一、理解web标准含义--为什么采用web标准

    *****将内容与样式分离

    1、web标准是一系列标准,就是一系列技术标准

    在使用时,是组合应用

    【1】、结构化内容 xhtml

    【2】、表现化内容 css

    【3】、行为化内容 JavaScript

    2、网页开发的小工具--火狐浏览器中的firebug

    工具--附加组件--搜索firebug

    作为web前端工作,要兼容的浏览器ie,火狐浏览器,谷歌刘浏览器,苹果浏览器等。

    网页是否有css样式,测试--在浏览器改变文字大小。

    3、css定义技巧:

    【1】、为了将来的css代码优化,建议所有的属性值后面都要带上“;”

    【2】、某些xhtml标签有自己默认的css属性值,

    例如h1标签就有自己的属性值,自动就是加粗显示,字号比较大。

    【3】、为了兼容主流浏览器,为统一,建议我们在设置时,将所有元素的css属性重置为标准的。

    【4】、不同的浏览器,有各自不容的css属性值--要命的就是浏览器的兼容。

    【5】、就一个比较特殊的字体想用怎么办?--将其转化为图片。

    分中英文字体。设置字体的顺序,将英文字体设置在前,中文在后。

    【6】、css编辑工具--用什么都行,高手,用树叶杀人

    【7】、想让文字在垂直方向上居中,将行高设置为元素的高度,行高=元素高度

    【8】、css可以重新设置,xhtml标签的默认样式。

    4、css应用给网页的方式:就相当于给人怎么去穿上衣服。

    【1】、行内样式:应用于一个。

    【2】、嵌入样式:应用于一类标签。

    【3】、如果我们有很多的网页,都要用css,将这些css写到一个文件中,这个就是外链式,推荐使用。

    【4】、导入式样式:也是将样式写到一个文件中,再倒入到网页中。

    *****说明,导入式,其实与内嵌式是相类似的,都是将样式加入到网页里。

    1、导入式会占用html文件空间

    2、有些浏览器解析会有问题。浏览器会最后读取@import中的内容

    3、将多个样式文件,导入到一个样式文件中。

    二、css的特性

    css叫层叠样式表。

    1、继承:子元素会继承父元素的某些样式。

    【因为有些子元素本身就有默认值,所以他就不用父元素】

    2、叠层:子元素如果定义了与父元素相同的样式,会覆盖掉父元素的样式。

    *****后面的样式会覆盖前面的样式

    三、css样式的优先权:当样式有冲突时,听谁?

    css优先权:就近原则

    作用范围越小,优先权越高。

    离要修饰目标越近的样式优先权越高。

    爷爷--红

    爸爸--绿

    孩子--蓝

    选择优先权

    行内idclass标签选择符

    特殊情况,我们可以提升某个属性的权限

    *****IEtest工具,也有一个兼容性问题,在win7下打不开ie6.--下载绿色版ie6。不用安装直接用哪种版本。

    四、常用的一些文字,文本控制的css样式

    *****我们在应用css样式时,一定要注意它的默认值。因为不同的浏览器它的css默认值是不同的(不同的属性浏览

    器支持是不一样的,我们还要保证我们网页的兼容性,尽量使用通过的属性,不用存在兼容性差别的属性。)

    五、css控制元素的某种状态--伪类

    伪类语法:

    元素名称:伪类名称{属性:值}

    例如:超链接的鼠标经过状态

    a:hover{text-decoration:underline;}

    *****如果,鼠标放上效果不起作用,请修改连接状态的顺序 L-V-H-A

    以上这篇Html/Css(新手入门第一篇必看攻略)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

    原文地址:http://www.cnblogs.com/xie-zhan/archive/2016/07/01/5631868.html

    css(二)

    1.有序列表:每项之间有先后顺序,默认在每项前面显示1,2,3…
    <ol type="A"> :在每项前面显示A,B,C…
    <ol type="a"> :在每项前面显示a,b,c…
    <ol type="I"> :在每项前面显示I,II,III…
    有序列表ol增加了一个属性, <ol start="50"> ,这样就指定了起始值从50开始
    2.无序列表使用一对闭合的标签表示, <ul></ul> 。内部的一项使用 <li> 内容 </li> 来表示。
    可以通过ul标签的type属性来修改这个修饰符。
    <ul type="disc"> 显示为一个圆点,是默认值
    <ul type="circle"> 显示为一个空心圆圈
    <ul type="square"> 显示为一个实体正方形
    “无序”指的是没用数字或字母等来标记,不是像1,2,3或a,b,c这样的显示,而是前面增加一个圆点来表示。
    3.自定义列表
    <dl> 标签全称是definition list,代表“自定义列表”。 <dl> 后面的l代表list,列表的意思。
    <dt> 标签全称是definition term,代表 “自定义项”。一个自定义列表dl内部可以包括多个自定义项dt。 <dt> 后面的t代表term,“项目”的意思。
    <dd> 标签的全称是definition description,代表“自定义描述”。一个自定义项dt后面跟一个自定义描述dd。 <dd> 后面的d代表description,“描述”的意思。
    例子:

    使用 list-style-type: none;

    id:指定标签的唯一标识
    class:指定标签的类名,class可以通过给多个元素赋予同一class,批量操作来设置css

    块元素都是独立显示,把内容分割成块,是网页的主要结构模块;行内元素,即内联元素,只显示在段落的文字流中,是用来标记内容的小片段
    块级元素标签 h,ul,li,ol,p,div
    行内元素标签 a,em,q, img,span

    页面分:头部、内容、底部,头部有三个导航栏,内容有侧边栏和中心区块,三个区块结构里面共用了一个class样式。

    语义化:使用语义恰当的标签,使页面有良好的结构,页面元素有含义,能够让人和搜索引擎都容易理解。

    1.<form> 标签用于为用户输入创建 HTML 表单。表单用于向服务器传输数据。
    <form name="myForm" action="/test/6.php" method="post">
    name:表单提交时的名称;
    action:提交到的地址,如果不写action,信息就会提交到当前页面;
    method:提交方式(get和post),如果不写,默认的是get
    2.常用标签:

    复选框当中,可以把name值设置成一个数组,例:

    <button> 提交 </button> ——普通按钮,button默认是不提交任何数据,需要绑定事件才可以用提交数据
    <a class="btn" href="#"> 提交 </a> ——链接
    <input type="submit" value="提交"> ——提交按钮,提交信息到服务器

    设置name值实现分组,如果name值相同,则表示它们是一组,可以实现单选。

    placeholder 属性提供可描述输入字段预期值的提示信息。
    该提示会在输入字段为空时显示,并会在字段获得焦点时消失。

    隐藏域在页面中对于用户是不可见的,在表单中插入隐藏域的目的在于收集或发送信息,以利于被处理表单的程序所使用。浏览者单击发送按钮发送表单的时候,隐藏域的信息也被一起发送到服务器。
    <input type="hidden" name="identity" value="123">

    css(二)

    1.有序列表:每项之间有先后顺序,默认在每项前面显示1,2,3…
    <ol type="A"> :在每项前面显示A,B,C…
    <ol type="a"> :在每项前面显示a,b,c…
    <ol type="I"> :在每项前面显示I,II,III…
    有序列表ol增加了一个属性, <ol start="50"> ,这样就指定了起始值从50开始
    2.无序列表使用一对闭合的标签表示, <ul></ul> 。内部的一项使用 <li> 内容 </li> 来表示。
    可以通过ul标签的type属性来修改这个修饰符。
    <ul type="disc"> 显示为一个圆点,是默认值
    <ul type="circle"> 显示为一个空心圆圈
    <ul type="square"> 显示为一个实体正方形
    “无序”指的是没用数字或字母等来标记,不是像1,2,3或a,b,c这样的显示,而是前面增加一个圆点来表示。
    3.自定义列表
    <dl> 标签全称是definition list,代表“自定义列表”。 <dl> 后面的l代表list,列表的意思。
    <dt> 标签全称是definition term,代表 “自定义项”。一个自定义列表dl内部可以包括多个自定义项dt。 <dt> 后面的t代表term,“项目”的意思。
    <dd> 标签的全称是definition description,代表“自定义描述”。一个自定义项dt后面跟一个自定义描述dd。 <dd> 后面的d代表description,“描述”的意思。
    例子:

    使用 list-style-type: none;

    id:指定标签的唯一标识
    class:指定标签的类名,class可以通过给多个元素赋予同一class,批量操作来设置css

    块元素都是独立显示,把内容分割成块,是网页的主要结构模块;行内元素,即内联元素,只显示在段落的文字流中,是用来标记内容的小片段
    块级元素标签 h,ul,li,ol,p,div
    行内元素标签 a,em,q, img,span

    页面分:头部、内容、底部,头部有三个导航栏,内容有侧边栏和中心区块,三个区块结构里面共用了一个class样式。

    语义化:使用语义恰当的标签,使页面有良好的结构,页面元素有含义,能够让人和搜索引擎都容易理解。

    1.<form> 标签用于为用户输入创建 HTML 表单。表单用于向服务器传输数据。
    <form name="myForm" action="/test/6.php" method="post">
    name:表单提交时的名称;
    action:提交到的地址,如果不写action,信息就会提交到当前页面;
    method:提交方式(get和post),如果不写,默认的是get
    2.常用标签:

    复选框当中,可以把name值设置成一个数组,例:

    <button> 提交 </button> ——普通按钮,button默认是不提交任何数据,需要绑定事件才可以用提交数据
    <a class="btn" href="#"> 提交 </a> ——链接
    <input type="submit" value="提交"> ——提交按钮,提交信息到服务器

    设置name值实现分组,如果name值相同,则表示它们是一组,可以实现单选。

    placeholder 属性提供可描述输入字段预期值的提示信息。
    该提示会在输入字段为空时显示,并会在字段获得焦点时消失。

    隐藏域在页面中对于用户是不可见的,在表单中插入隐藏域的目的在于收集或发送信息,以利于被处理表单的程序所使用。浏览者单击发送按钮发送表单的时候,隐藏域的信息也被一起发送到服务器。
    <input type="hidden" name="identity" value="123">

    CSS 基础语法


    CSS 语法
    CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。
    selector {declaration1; declaration2; ... declarationN }
    选择器通常是您需要改变样式的 HTML 元素。
    每条声明由一个属性和一个值组成。
    属性(property)是您希望设置的样式属性(style attribute)。每个属性有一个值。属性和值被冒号分开。
    selector {property: value}
    下面这行代码的作用是将 h1 元素内的文字颜色定义为红色,同时将字体大小设置为 14 像素。
    在这个例子中,h1 是选择器,color 和 font-size 是属性,red 和 14px 是值。
    h1 {color:red; font-size:14px;}
    下面的示意图为您展示了上面这段代码的结构:
    提示:请使用花括号来包围声明。
    值的不同写法和单位
    除了英文单词 red,我们还可以使用十六进制的颜色值 #ff0000:
    p { color:
    #ff0000
    ; }
    为了节约字节,我们可以使用 CSS 的缩写形式:
    p { color:
    #f00
    ; }
    我们还可以通过两种方法使用 RGB 值:
    p { color:
    rgb(255,0,0)
    ; }p { color:
    rgb(100%,0%,0%)
    ; }
    请注意,当使用 RGB 百分比时,即使当值为 0 时也要写百分比符号。但是在其他的情况下就不需要这么做了。比如说,当尺寸为 0 像素时,0 之后不需要使用 px 单位,因为 0 就是 0,无论单位是什么。
    记得写引号
    提示:如果值为若干单词,则要给值加引号:
    p {font-family:
    "sans serif"
    ;}
    多重声明:
    提示:如果要定义不止一个声明,则需要用分号将每个声明分开。下面的例子展示出如何定义一个红色文字的居中段落。最后一条规则是不需要加分号的,因为分号在英语中是一个分隔符号,不是结束符号。然而,大多数有经验的设计师会在每条声明的末尾都加上分号,这么的好处是,当你从现有的规则中增减声明时,会尽可能的减少出错的可能性。就像这样:
    p {text-align:center
    ;
    color:red
    ;
    }
    你应该在每行只描述一个属性,这样可以增强样式定义的可读性,就像这样:
    p {
    text-align: center;
    color: black;
    font-family: arial;}
    空格和大小写
    大多数样式表包含不止一条规则,而大多数规则包含不止一个声明。多重声明和空格的使用使得样式表更容易被编辑:
    body {
    color: #000;
    background: #fff;
    margin: 0;
    padding: 0;
    font-family: Georgia, Palatino, serif;
    }
    是否包含空格不会影响 CSS 在浏览器的工作效果,同样,与 XHTML 不同,CSS 对大小写不敏感。不过存在一个例外:如果涉及到与 HTML 文档一起工作的话,class 和 id 名称对大小写是敏感的。

    CSS 基础语法


    CSS 语法
    CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。
    selector {declaration1; declaration2; ... declarationN }
    选择器通常是您需要改变样式的 HTML 元素。
    每条声明由一个属性和一个值组成。
    属性(property)是您希望设置的样式属性(style attribute)。每个属性有一个值。属性和值被冒号分开。
    selector {property: value}
    下面这行代码的作用是将 h1 元素内的文字颜色定义为红色,同时将字体大小设置为 14 像素。
    在这个例子中,h1 是选择器,color 和 font-size 是属性,red 和 14px 是值。
    h1 {color:red; font-size:14px;}
    下面的示意图为您展示了上面这段代码的结构:
    提示:请使用花括号来包围声明。
    值的不同写法和单位
    除了英文单词 red,我们还可以使用十六进制的颜色值 #ff0000:
    p { color:
    #ff0000
    ; }
    为了节约字节,我们可以使用 CSS 的缩写形式:
    p { color:
    #f00
    ; }
    我们还可以通过两种方法使用 RGB 值:
    p { color:
    rgb(255,0,0)
    ; }p { color:
    rgb(100%,0%,0%)
    ; }
    请注意,当使用 RGB 百分比时,即使当值为 0 时也要写百分比符号。但是在其他的情况下就不需要这么做了。比如说,当尺寸为 0 像素时,0 之后不需要使用 px 单位,因为 0 就是 0,无论单位是什么。
    记得写引号
    提示:如果值为若干单词,则要给值加引号:
    p {font-family:
    "sans serif"
    ;}
    多重声明:
    提示:如果要定义不止一个声明,则需要用分号将每个声明分开。下面的例子展示出如何定义一个红色文字的居中段落。最后一条规则是不需要加分号的,因为分号在英语中是一个分隔符号,不是结束符号。然而,大多数有经验的设计师会在每条声明的末尾都加上分号,这么的好处是,当你从现有的规则中增减声明时,会尽可能的减少出错的可能性。就像这样:
    p {text-align:center
    ;
    color:red
    ;
    }
    你应该在每行只描述一个属性,这样可以增强样式定义的可读性,就像这样:
    p {
    text-align: center;
    color: black;
    font-family: arial;}
    空格和大小写
    大多数样式表包含不止一条规则,而大多数规则包含不止一个声明。多重声明和空格的使用使得样式表更容易被编辑:
    body {
    color: #000;
    background: #fff;
    margin: 0;
    padding: 0;
    font-family: Georgia, Palatino, serif;
    }
    是否包含空格不会影响 CSS 在浏览器的工作效果,同样,与 XHTML 不同,CSS 对大小写不敏感。不过存在一个例外:如果涉及到与 HTML 文档一起工作的话,class 和 id 名称对大小写是敏感的。

    css的基本语法结构及规范

    一、CSS简介

    CSS(Cascading Style Sheet)层叠样式表,它是用来美化页面的一种语言,之前提到的W3C规范中的“样式”。

    作用:

    1、美化界面。

    2、页面布局。

    基本语法:

    选择器{
    样式规则

    }

    样式规则:

    属性名1:属性值1;

    属性名2:属性值2;

    属性名3:属性值3;
    。。。

    选择器:是用来选择标签的,选出来以后给标签加样式。

    从Hello World说起,

    <p style="background-color:#FFF;color:#000;font-size:30px;">Hello World!</p>
    这样写可以实现将原本的白底黑字Hello World! 改成样式为 黑底白字的效果。但是这样写有一定的缺点:

    缺点1:内容、样式、行为三者未分离,代码糅杂,不符合W3C规范,难以维护。

    缺点2:代码冗余,不可复用。

    二、如何引入CSS?

    1)行内样式

    即上述的一般形式,由于其存在的缺点,介绍下一种样式。

    2)内嵌样式,给p标签加样式,加在head标签中

    <style type="text/css">

    p{
    background-color:#FFF;

    color:#000;

    font-size:30px;

    }

    </style>

    当本页面的p标签都需要相同的样式时,这样写大大降低了代码量,并让其他编程人员一眼分辨出来CSS样式。

    3)链接样式(链入式)

    在head标签中加入

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

    将CSS文件和html文件分开来放,这样增加了代码的重用性,但是每个浏览器都要单独读取css文件中的样式,比较慢,如果追求速度,内嵌样式会更好。

    4)导入样式

    <style type="text/css">

    @import url("路径名");

    </style>

    四种样式的优先级:

    如果一个页面中四种样式同时存在,这四种都会对标签起作用,但是重复样式的属性值,只有最后一个有效。如果内嵌样式和导入样式放在一起,则内嵌样式起作用。

    如果内嵌样式和导入样式分成两个style定义,则在CSS样式中的最后一个style起作用。

    附:css中注释的格式,没有单行注释,所有的注释均是/*注释内容*/

    css的基本语法结构及规范

    一、CSS简介

    CSS(Cascading Style Sheet)层叠样式表,它是用来美化页面的一种语言,之前提到的W3C规范中的“样式”。

    作用:

    1、美化界面。

    2、页面布局。

    基本语法:

    选择器{
    样式规则

    }

    样式规则:

    属性名1:属性值1;

    属性名2:属性值2;

    属性名3:属性值3;
    。。。

    选择器:是用来选择标签的,选出来以后给标签加样式。

    从Hello World说起,

    <p style="background-color:#FFF;color:#000;font-size:30px;">Hello World!</p>
    这样写可以实现将原本的白底黑字Hello World! 改成样式为 黑底白字的效果。但是这样写有一定的缺点:

    缺点1:内容、样式、行为三者未分离,代码糅杂,不符合W3C规范,难以维护。

    缺点2:代码冗余,不可复用。

    二、如何引入CSS?

    1)行内样式

    即上述的一般形式,由于其存在的缺点,介绍下一种样式。

    2)内嵌样式,给p标签加样式,加在head标签中

    <style type="text/css">

    p{
    background-color:#FFF;

    color:#000;

    font-size:30px;

    }

    </style>

    当本页面的p标签都需要相同的样式时,这样写大大降低了代码量,并让其他编程人员一眼分辨出来CSS样式。

    3)链接样式(链入式)

    在head标签中加入

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

    将CSS文件和html文件分开来放,这样增加了代码的重用性,但是每个浏览器都要单独读取css文件中的样式,比较慢,如果追求速度,内嵌样式会更好。

    4)导入样式

    <style type="text/css">

    @import url("路径名");

    </style>

    四种样式的优先级:

    如果一个页面中四种样式同时存在,这四种都会对标签起作用,但是重复样式的属性值,只有最后一个有效。如果内嵌样式和导入样式放在一起,则内嵌样式起作用。

    如果内嵌样式和导入样式分成两个style定义,则在CSS样式中的最后一个style起作用。

    附:css中注释的格式,没有单行注释,所有的注释均是/*注释内容*/

    HTML和CSS的关系

    一、css是Cascading Style Sheets 的缩写,即层叠式样式表单,它是由W3C协会制定并发布的一个网页排版式标准,是对HTML语言功能的补充。

    二、HTML和CSS的区别?

    1、定义不同:

    html是HyperTextMark-upLanguage的缩写,即超文本标记语言;

    css是Cascading Style Sheets 的缩写,即层叠式样式表单,它是由W3C协会制定并发布的一个网页排版式标准,是对HTML语言功能的补充。

    2、用途不同:

    html则是用于文本内容,包括头部(Head)、主体(Body)两大部分,其中头部描述浏览器所需的信息,而主体则包含所要说明的具体内容。

    css是多用于样式,主要的用途是对网页中字体、颜色、背景、图像及其他各种元素的控制,使网页能够完全按照设计者的要求来显示。

    3、CSS语法与HTML语法完全不同:

    HTML里代码是功能标签,如DIV、SPAN、A链接、em标签、I斜体标签、u下划线等,html代码语法范例:<div>内容</div>

    CSS样式代码语法是div{样式单词:值}

    三、HTML和CSS联系:

    CSS与HTML相同之处在于,两个共同作用让网页实现需要的布局样式。

    扩展资料:

    1、标记符<html>,说明该文件是用超文本标记语言(本标签的中文全称)来描述的,它是文件的开头;而</html>,则表示该文件的结尾,它们是超文本标记语言文件的开始标记和结尾标记。

    2、CSS为HTML标记语言提供了一种样式描述,定义了其中元素的显示方式。CSS在Web设计领域是一个突破。利用它可以实现修改一个小的样式更新与之相关的所有页面元素。

    CSS可以将样式定义在HTML元素的style属性中,也可以将其定义在HTML文档的header部分,也可以将样式声明在一个专门的CSS文件中,以供HTML页面引用。总之,CSS样式表可以将所有的样式声明统一存放,进行统一管理。

    HTML样式CSS的三种写法

    CSS是样式层叠表,有三种引入方式。下面,我们来看看HTML样式CSS的三种写法吧。

    行内样式

    CSS可以直接放到行内样式中引入即可,比如代码如下图:

    <p style="color: blue; background: red;">

    hello world!

    </p>

    嵌入式

    还可以采用潜入方式引入CSS,就是把CSS写到<style>标签中,这种方式比较实用,如下图所示:

    <style type="text/css">

    h1 {color: red;}

    </style>

    <h1>helloworld</h1>

    外部样式表

    还有一种叫做外部样式,也就是把CSS写在另外一张页面上,然后再引用到指定页面就可以了,这种也很常见。

    @import url(main.css);

    欢乐泡美食网还为您提供以下相关内容希望对您有帮助:

    html和css有什么区别

    html和css区别二:注释的格式在html中,一般注释的格式是&lt;!--要注释内容--&gt;,而在css中,注释的格式一般是/*注释内容*/,两者是完全不同的注释方法。html和css区别三:语法html语法示例如下:&lt;div&gt;内容&lt;/div&gt;css语法示...

    CSS 基础语法

    CSS 语法CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。selector {declaration1; declaration2; ... declarationN }选择器通常是您需要改变样式的 HTML 元素。每条声明由一个属性和一个值组成。属性(propert...

    HTML和CSS的区别是什么?语法上有区别吗

    1、定义不同:html是HyperTextMark-upLanguage的缩写,即超文本标记语言;css是CascadingStyleSheets的缩写,即层叠式样式表单,它是由W3C协会制定并发布的一个网页排版式标准,是对HTML语言功能的补充。2、用途不同:html则是...

    css的基本语法

    7、截字省略号 .hh { - o- text- overflow:ellipsis; text- overflow:ellipsis; white- space:nowrap; overflow:hidden; } 这个CSS 是定义当内容溢出宽度后会自行的截掉超出部分的文字,并以省略号结尾,但注意Firefox 并不支持。

    css的基本语法结构及规范

    一、CSS简介 CSS(Cascading Style Sheet)层叠样式表,它是用来美化页面的一种语言,之前提到的W3C规范中的“样式”。作用:1、美化界面。2、页面布局。基本语法:选择器{ 样式规则 } 样式规则:属性名1:属性值1;属性...

    css的基本语句的结构是

    1.HTML标记例如:H1{text-align:center;font-family:楷体-gb2312},H1,H2,H3{color:#ff0000} 2.具有上下文关系的HTML标记例如:H1 B{color:red},这表示只有位于标记元素内的 标记符说明的内容显示为红色,其它标记符所...

    HTML+CSS 是什么意思

    层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各...

    html css基础教程主要内容有哪些?

    html css基础教程归纳如下:第1、Html介绍本章节主要讲解html和css样式的关系,以及html标签、html文件结构、head标签,最后讲解了在html中的注释代码的作用。第2、认识标签(第一部分)学完这一章节将对标签的使用有了一些初步的...

    Web前端开发知识点之CSS的使用方式

    二、CSS语法CSS语法规则由两个主要的部分构成:选择器,以及一条或多条声明。选择器通常是您需要改变样式的HTML元素。每条声明由一个属性和一个值组成。两条声明之间被分号分开。属性是您希望设置的样式属性。每个属性有一个...

    CSS语法的介绍

    CSS 语法由三部分构成:选择器、属性和值。selector {property: value}选择器 (selector) 通常是你希望定义的 HTML 元素或标签,属性 (property) 是你希望改变的属性,并且每个属性都有一个值。属性和值被冒号分开,并由...

    Top