2014年10月13日层叠样式表CSS

比眉伴天荒 2022-08-13 05:00 197阅读 0赞

HTML就不说了，用到哪个再查就行了

前台方面大致说一下就行了

一、简介

HTML文档的元素和属性仅可以简单的控制文档的外观，如果希望全面的控制WEB页面的话，就需要CSS。

CSS的作用是定义网页的外观（如，字体，背景，位置，布局等）。它也可以和Javascript结合做出动态效果。

1).什么是样式表？

就是样式化HTML的一种方法。

2).什么是层叠？

就是将一组样式放在一起使用，来控制HTML一个或多个元素按照样式表中的属性显示。

CSS是可以用于多个页面的，甚至整个站点，所以它既可以嵌入HTML文档，也可以单独保存一个CSS文档。

二、特点

1).它可以精确的定位到HTML中的每一个元素

2).可以补充HTML样式

3).可以和要处理的内容分离，仅改CSS样式属性即可对内容的样式做出更改（不用一个一个的在HTML文档中找，然后再改），减少工作量。

三、语法

p{
    	font-size: 10px;             /* 注释用这样的格式  */
    	color: red;					/*颜色：红色*/
    	border: 2px;
    	text-align: center;
    	background: yellow;
     }

现在说一下它的组成：

开头的p：他是一个选择器，用户定位到HTML中的元素

括号里面的font-size，color等均为属性

属性后面跟着的是属性的值

现在这个CSS的整体效果就是，HTML中的每个<p>标签所展示的内容，他们的字体大小都为10px，颜色为红色，有个宽度为2px的边框，他们处于文档中央，背景颜色为黄色。

这里说一下什么是选择器

1）HTML选择器

任何一个HTML标签都可以是选择器，用于找到和选择器同名的标签

2）类选择器

你可能会遇到这样的形式

<html>
    	
    	<body>
    		
    		<p class="num1">第一段</p>
    		<p class="num2">第二段</p>
    		<p class="num3">第三段</p>
    		<p class="num4">第四段</p>
    
    	</body>
    
    
    </html>

如果我想把这四个段落全部一样的形式的话，选择器直接为p即可，若是每个段落都有不同的样式，就该这样定位：p.num1，p.num2，p.num3，p.num4

如果只有一个类似于.num1的选择器，会定位到所有类名为num1的标签。

3）ID选择器

样式：

<html>
    	
    	<body>
    		
    		<p ID="id1">第一段</p>
    
    	</body>
    
    
    </html>

如何去定位这个呢，方法：p\#id1，如果仅有\#id1，定位到所有id为id1的标签。

4）关联选择器

关联选择器不过是一个用空格隔开的两个或多个单一的选择器组成的字符串

例如：

table a{
    	color: red;
     }

要 注意，这种方式只对在第一个元素里关联的第二个元素有效，即它定义了在<table>标签中的<a>标签内容变为红色，表格外的<a>标签样式不变。

5）组合选择器

意思是将多个选择器定义为相同的格式

如：

h1,h2,h3{
    	font-size: 10px;             /* 注释用这样的格式  */
    	color: red;					/*颜色：红色*/
     }

这样式表中的属性用到哪个查下就行了。老婆~~~![大笑][laugh.gif]

[laugh.gif]: /images/20220810/635cf16155544625bb84ea68637188c2.png

发表评论取消回复

表情：

评论列表（有 0 条评论，197人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS层叠样式表

CSS 作用如何在 html 页面中添加 css 样式 CSS 选择器颜色赋值方式背景图片文本和字体相关的样式 disp

素颜马尾好姑娘i/ 2024年03月26日 11:57/ 0 赞/ 68 阅读

相关 2014年10月13日层叠样式表CSS

HTML就不说了，用到哪个再查就行了前台方面大致说一下就行了一、简介 HTML文档的元素和属性仅可以简单的控制文档的外观，如果希望全面的控制WEB页面的话，就需要CS

比眉伴天荒/ 2022年08月13日 05:00/ 0 赞/ 198 阅读

相关 JavaWeb：CSS层叠样式表

层叠样式表 CSS将网页内容和显示样式进行分离，提高了显示功能。 ![样式表css][css] ![样式表css][css 1] HTML和CSS的结合方式

傷城~/ 2022年07月15日 04:08/ 0 赞/ 237 阅读

相关 JavaWeb：CSS层叠样式表

层叠样式表 CSS将网页内容和显示样式进行分离，提高了显示功能。 ![样式表css][css] ![样式表css][css 1] HTML和CSS的结合方式

蔚落/ 2022年07月15日 04:08/ 0 赞/ 249 阅读

相关 CSS层叠样式表-相关总结

字体属性：(font) 1.大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到，只要用数值就可

分手后的思念是犯贱/ 2022年02月15日 00:11/ 0 赞/ 286 阅读

相关 day2——Css层叠样式表

Css语法一、标称名 \{ 属性：值；\} 一个样式的语法是由三部分构成：选择器、属性和属性值二、id和class id和class是HTML元

太过爱你忘了你带给我的痛/ 2021年12月03日 03:23/ 0 赞/ 373 阅读

相关 CSS：层叠样式表的使用

CSS：层叠样式表（ Cascading Style Sheets ，主要实现网页美化以及各种特效； CSS分为三种：一、行内样式（inline style）　

ゞ浴缸里的玫瑰/ 2021年11月23日 23:06/ 0 赞/ 545 阅读

相关 SE 2014年4月1日

一、描述OSPF报文都有哪些，其作用？ OSPF报文主要有：hello报文、DD报文、LSR报文、LSU报文和LSAck报文。 Hello报文主要用来建立和维护邻居关系。

绝地灬酷狼/ 2021年11月10日 11:58/ 0 赞/ 427 阅读

相关 CSS层叠样式表的入门

目录：点击可快速跳转什么是css？ css的格式： css样式可以写在什么地方？ CSS的选择器有哪些？ 4）复合选择器： 5）属性选择器： 6）伪类选择器：

水深无声/ 2021年11月04日 13:04/ 0 赞/ 444 阅读

相关 HTML CSS 层叠样式表一

CSS，全拼Cascading Style Sheets，层叠样式表，用于控制html<body>的元素的样式和布局。一、CSS的三种引用方式 1.内嵌 <div s

短命女/ 2021年09月30日 03:02/ 0 赞/ 411 阅读