DIV+CSS学习小结

DIV+CSS是WEB设计标准,它是一种网页的布局方法。与传统的通过表格布局定位的方式不同,它可以实现网页页面与表现想分离。

因为在牛腩还有JS都有大量的接触到CSS,到现在再学习DIV+CSS的时候,就不再感觉陌生了,都是共鸣~~

无论怎么设置CSS样式,都少不了选择器样式表

样式表

样式表最主要的有三种。分别为嵌入式样式表,外部样式表和内联样式表。

嵌入式样式表

在html的<head></head>标签之间添加样式表。

示例:

<head>
	<title>示例</title>
	<style type=”text/css”>
		#color{
			font-color:red;
}
</style>
</head>

内联样式表

直接在html标签中插入样式

示例:

<h1 style=“color:red”>示例<h1>

外部样式表

建立一个新的CSS文件,通过link语句插入到HTML代码中。

示例:

<link type=”text/css” rel=”stylesheet”  href=”css/示例.css”/>

选择器

选择器最常用的也是三种,分别是ID选择器,类选择器和标签选择器。

ID选择器

在HTML中,可以给元素添加ID,来确定这个元素的位置,同时,这个ID必须是唯一的,不可重复的。可以通过ID来给标签设置样式

示例:

给p标签设置一个叫做color的id。

<p id=”color”>示例 </p>

通过css的id选择器来给<p>标签中的内容改变颜色。

#color{
	font-color:red;
}

类选择器

在HTML中,可以给标签添加class属性,通过class来给标签设置属性。

示例:

给p标签设置一个叫做color的class。

<p class=”color”>示例 </p>

通过css的类选择器来给<p>标签中的内容改变颜色。

.color{
	font-color:red;
}

标签选择器

根据HTML标签来给标签中的内容改变样式。

示例:

改变<p>标签的文字的颜色

	<p>示例</p>

通过标签选择器改变<p>标签中文字的颜色

P{
	color:red;
}

总结

选择器和样式表是CSS中最基本的内容。掌握了这些,在学习其他东西的时候回更加的得心应手。

在视频学习的时候,还学习到了CSS与JavaScript、CSS与XML和CSS与Ajax的综合运用,但掌握的不是很好,还需要多多练习,来进一步加深理解。

时间: 2024-10-09 01:04:35

DIV+CSS学习小结的相关文章

div+css学习笔记1

今天开始撰写我的学习笔记,今天是第一次写,但是我给自己的目标是坚持写,写给现在的自己,更写给未来的自己,希望围观的各位客官见谅. 今天学习主题是DIV+CSS,其实标准的讲应该称XHTML+CSS. 一:CSS的四种控制HTML的方式 1.行内式. 直接写在标签行内部. 例:<p style=" font:15px; color:green;"></p> 2.内嵌式. 将代码写在在html的头部<head></head>之间. 例:<

JavaWeb基础—CSS学习小结

重点记忆:四种结合方式 三种基本选择器 1.CSS:层叠样式表 相当于皮肤 提高了可维护性.样式与内容分离(注释格式/* */) 2.CSS与HTML结合的四种方式:内联式.嵌入式.外部式  1.每个标签上都有一个style[属性]来控制 sytle="key:value;key:value" <div style=""> 2.使用style标签:<style type="text/css">div{key:value}&

CSS学习小结

接触了B/S的东西之后才发现自己需要学习的东西太多了,html.xml.JavaScript.jquery.HTMLdom.VBScript.ajax.jquery.json等等技术都是需要我们一一研究的! 刚刚接触了CSS部分的知识,但仅仅是这一小小的技术就让自己瞠目结舌,看似不起眼的东西却实现了自己日常网页操作中非常多的功能--信息的自动检测.友好的弹窗.绚丽的动态效果.体贴的个性化服务,让自己产生了很大的共鸣.总体来说这一块的知识并不是很多,但是要做好一个能够兼容性良好的页面也确实需要下一

css 学习小结(1)

之前学习都是把知识点记在本子上,现在重新复习梳理一下,将知识点做个小结: 1.块元素:从上向下流(各元素之间有一个换行); 内联元素:水平方向上相互挨着,总体上从左上方流向右下方; 2.对于图像,通常不仅会设置外边距,还会设置内边距和边框; 3.如果要浮动(float)一个元素,则必须为这个元素设置一个宽度;浮动元素会从正常流中取出,浮动到左边或右边; 4.居中技巧: margin:auto;     //浏览器会根据需要扩展内容区,还会确保左和右外边距相同,所以内容会居中; top:50%;

DIV+CSS学习笔记

第十五章 定位 static静态定位(不对它的位置进行改变,在哪里就在那里) 默认值.没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明). fixed固定定位(参照物--浏览器窗口)---做 弹窗广告用到 生成固定定位的元素,相对于浏览器窗口进行定位. 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定. rela

div+css学习笔记2

1.blockquote段落缩进 能使整个段落缩进. <blockquote>HTML不同于过去学过的各种面向对象语言, 函数式语言, 它不像其他语言有明确的上下文的逻辑关系. 所以并不像其他语言一样需要有什么特定的基础, 希望这句话能让你远离学习过别的语言的阴影.</blockquote> 2.text-indent属性 让段落首行缩进. p{ text-indent: 5px; } 3.margin:0 auto;居中 这个在IE8.0下会失效,但在其他浏览器下可以正常居中显示

CSS技巧----DIV+CSS规范命名大全集合

网页制作中规范使用DIV+CSS命名规则,可以改善优化功效特别是团队合作时候可以提供合作制作效率,具体DIV CSS命名规则CSS命名大全内容篇. 常用DIV+CSS命名大全集合,即CSS命名规则 DIV CSS命名目录 命名规则说明 重要CSS命名 CSS命名参考表 命名技巧 我们开发CSS+DIV网页(Xhtml)时候,比较困惑和纠结的事就是CSS命名,特别是新手不知道什么地方该如何命名,怎样命名才是好的方法. 一.命名规则说明:   -   TOP 1).所有的命名最好都小写2).属性的值

div+css命名规范大全

网页制作中规范使用DIV+CSS命名规则,可以改善优化功效特别是团队合作时候可以提供合作制作效率, 我们开发DIV+CSS网页(Xhtml)时候,比较困惑和纠结的事就是CSS命名,特别是新手不知道什么地方该如何命名,怎样命名才是好的方法. 一.命名规则说明: 1).所有的命名最好都小写2).属性的值一定要用双引号("")括起来,且一定要有值如class="divcss5",id="divcss5"3).每个标签都要有开始和结束,且要有正确的层次,

网页制作中规范使用DIV+CSS命名规则,可以改善优化功效特别是团队合作时候可以提供合作制作效率,具体DIV CSS命名规则CSS命名大全内容如下:

页头:header  如:#header{属性:属性值;}或.header{属性:属性值;},也许你需要了解class与id区别及用法登录条:loginBar         标志:logo                侧栏:sideBar广告:banner              导航:nav                 子导航:subNav菜单:menu               子菜单:subMenu      搜索:search滚动:scroll               页