OpenSNN推文：CSS新手指南：小白速成课001

习CSS（层叠样式表）是掌握前端开发技能的关键之一。CSS用于控制网页的外观和布局，使其更加美观和用户友好。以下是一个从零开始学习CSS的全面指南：

一、基础概念

1. 什么是CSS

CSS（Cascading Style Sheets）是一种样式表语言，用于描述HTML文档的呈现。它可以控制网页的颜色、字体、布局等视觉样式。

2. CSS的作用

样式和美化：定义文本颜色、背景颜色、边框等。
布局和排版：控制元素的位置和大小，创建响应式布局。
动画和交互：添加过渡效果和动画，提升用户体验。

二、学习资源

1. 在线课程和学习平台

MDN Web Docs：Mozilla开发者网络提供了全面的CSS教程和参考资料。
W3Schools：提供CSS基础和高级教程，并有大量示例和练习。
Coursera和Udemy：上面有许多高质量的CSS课程，适合系统学习。

2. 书籍

《CSS权威指南》：一本详尽的CSS参考书，适合深入学习。
《HTML & CSS: Design and Build Websites》：适合初学者入门的书籍，结合HTML和CSS一起学习。

三、基础语法

1. CSS语法

CSS规则由选择器和声明块组成：

selector {
  property: value;
}

例如，设置所有段落文字颜色为蓝色：

p {
  color: blue;
}

2. 引入CSS

内联样式：
This is a blue paragraph.
内部样式表：
<head> <style> p { color: blue; } </style> </head>
外部样式表：
<head> <link rel="stylesheet" href="styles.css"> </head>
styles.css 文件内容：
p { color: blue; }

四、选择器

1. 基本选择器

元素选择器：
p { color: blue; }
类选择器：
.class-name { color: blue; }
This is a blue paragraph.
ID选择器：
#id-name { color: blue; }
This is a blue paragraph.

2. 组合选择器

后代选择器：
div p { color: blue; }
子选择器：
div > p { color: blue; }
并集选择器：
h1, h2, h3 { color: blue; }

3. 伪类和伪元素

伪类：
a:hover { color: red; }
伪元素：
p::first-line { font-weight: bold; }

五、盒模型

1. 盒模型概念

每个HTML元素都可以看作一个矩形的盒子，盒模型包括以下部分：

内容区域：实际内容显示区域。
内边距（padding）：内容区域周围的空白区域。
边框（border）：围绕内边距的边框。
外边距（margin）：元素周围的空白区域。

2. 盒模型属性

设置宽度和高度：
div { width: 100px; height: 100px; }
内边距：
div { padding: 10px; }
边框：
div { border: 1px solid black; }
外边距：
div { margin: 10px; }

六、布局

1. 传统布局

浮动布局：
.left { float: left; } .right { float: right; }
定位布局：
.relative { position: relative; top: 10px; left: 10px; } .absolute { position: absolute; top: 10px; left: 10px; }

2. 现代布局

Flexbox布局：
.container { display: flex; } .item { flex: 1; }
Grid布局：
.container { display: grid; grid-template-columns: repeat(3, 1fr); } .item { grid-column: span 2; }

七、响应式设计

1. 媒体查询

使用媒体查询来创建响应式布局：

@media (max-width: 600px) {
  .container {
    flex-direction: column;
  }
}

2. 弹性单位

使用相对单位（如百分比、em、rem）来实现响应式设计：

.container {
  width: 80%;
  padding: 2em;
}

八、实战练习

1. 创建一个简单的网页

结合HTML和CSS，创建一个简单的个人简介网页，包含以下内容：

个人照片
简短介绍
技能列表
联系方式

2. 参与在线项目

参与一些前端开发项目，应用所学知识并获取实践经验。可以在GitHub上寻找开源项目，也可以尝试自己设计和实现一些小项目。

九、持续学习

阅读文档：随时查阅MDN和W3Schools的文档，获取最新的CSS知识。
观看视频教程：YouTube和其他教育平台上有许多优秀的CSS视频教程。
加入社区：参与CSS开发者社区，向他人学习并分享自己的经验。

通过以上步骤，你可以系统地学习CSS，并逐步掌握网页样式和布局的技能。坚持学习和实践，你将能够创建美观且响应迅速的网页。祝你学习愉快！

tml([val|fn]) 返回值:String

取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。

在一个 HTML 文档中, 我们可以使用 .html() 方法来获取任意一个元素的内容。

如果选择器匹配多于一个的元素，那么只有第一个匹配元素的 HTML 内容会被获取。

function(index, html) Function

此函数返回一个HTML字符串。接受两个参数，index为元素在集合中的索引位置，html为原先的HTML值。

返回p元素的内容。

jQuery 代码:

$('p').html();

设置所有 p 元素的内容

jQuery 代码:

$("p").html("Hello <b>world</b>!");

使用函数来设置所有匹配元素的内容。

jQuery 代码:

$("p").html(function(index,n){
    return "这个 p 元素的 index 是：" + n;
});

text([val|fn]) 返回值:String

val String 用于设定HTML内容的值

function(index, html) Function 此函数返回一个HTML字符串。接受两个参数，index为元素在集合中的索引位置，html为原先的HTML值。

返回p元素的文本内容。

jQuery 代码:

$('p').text();

设置所有 p 元素的文本内容

jQuery 代码:

$("p").text("Hello world!");

使用函数来设置所有匹配元素的文本内容。

jQuery 代码:

$("p").text(function(index,n){
    return "这个 p 元素的 index 是：" + n;
});
$("#test").html();

意思是指：获取ID为test的元素内的html代码。其中html()是jQuery里的方法

这段代码等同于用DOM实现代码：

document.getElementById("test").innerHTML;

直接获取、编辑内容

在jQuery中，主要是通过html()和text()两种方法来获取和编辑页面内容的。其中html()相当于获取节点的innerHTML属性，

添加参数html(text)时,则为设置innerHTML;而text()则用来获取元素的纯文本，text(content)为设置纯文本。

实例1:

jQuery代码:

$(function(){
    var sString=$("p:first").text(); //获取纯文本
    $("p:last").html(sString);
});

HTML代码:

<p><b>文本</b>段 落<em>示</em>例</p>
<p></p>

实例2:

jQuery代码:

$(function(){
    $("p").click(function(){
        var sHtmlStr=$(this).html(); //获取innerHTML
        $(this).text(sHtmlStr); //将代码做为纯文本传入
    });
});

HTML代码:

文本段落示例

实例3：获取选择框的文本

$("#id").find("option:selected").text(); //获取Select选择的text文本
<html>
<head>
<title>Untitled Page</title>
<script type="text/javascript" src="Scripts/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$function(){
    $('#OK').bind('click', function () {
    alert($("#id").find("option:selected").text());
    });
}
</script>
</head>
<body>
<select id="select">
<option value="1">text1</option>
<option value="2">text2</option>
<option value="3">text3</option>
<option value="4">text4</option>
</select>
<button id="OK">
获取为本</button>
</body>
</html>

$().html(); //获得节点包含的信息

$().html(信息); //设置节点包含的内容

$().text(); //获得节点包含的"文本字符串信息"内容

$().text(信息); //设置节点包含的内容(有html标签就把"><"符号变为符号实体)

注意: DOM操作必须保住DOM节点必须存在, 当然也包括使用css样式display:none隐藏的DOM节点, 否则会导致js语法错误;

、 HTML 语言

1 HTML 简介

HyperText Markup Language（超文本标记语言）

标记也称标签，放在< >中。
标记是英文单词或缩写，有固定含义，能被浏览器识别和翻译。

2 HTML 文档的结构

二、常用 HTML 标记

1 特殊字符标记

2 段落标记

<p 属性=值>
------段(paragraph) (可以看作是空行)
------align 属性可设置段落的对齐方式，如左对齐、居中、右对齐。

3 换行标记

<br>

4 居中标记

<center>需要居中的内容</center>

5 字体标记

<font face="字体样式" color=字体颜色 size=字体大小>文字</font>

6 格式标记

<b>加粗</b>
<u>下划线</u>
<i>倾斜</i>

7 图像标记

<img src="images/adv_2.jpg" width="300" height="150" alt="明星演唱会开幕">
------image：图片/像
------source：来源
------alternative：交替、变换

8 链接标记

<a href="register/register.html">[免费注册]</a>
------anchor：锚，链接
------http references：参考的 http 地址

9 表格标记

9.1 表格的结构

9.2 表格标记

9.3 合并行或列

10 表单标记

10.1 典型应用

注册用户
收集信息
反馈信息

10.2 表单由控件组成

10.3 表单中的标记

10.3.1 表单标记

10.3.2 控件标记

样式表(Cascading Style Sheets，层叠/级联样式表)
------用于设置控件属性格式。
------行内嵌入 css 样式表：<标记 style="">

10.3.3 文本框控件

10.3.4 密码框控件

10.3.5 单选按钮控件

10.3.6 复选框控件

10.3.7 下拉列表控件

10.3.8 列表框控件

10.3.9 多行文本框/文本区域控件

10.3.10 按钮控件

按钮类型可为 submit、reset、button

10.3.11 框架标记

10.3.11 .1 创建框架中的每个子页面窗口

top.html
left.html
main.html

10.3.11 .2 创建框架集

改变框架内的页面显示

单击 left.html 中不同的按钮，在 rightframe 中显示不同的页面
使用 target 目标窗口属性
<a href=url target="要显示的框架名">

三、 Session 和 Cookie

1 http 无状态

http 协议是无状态的，本次请求和上次请求无法判断是不是同一个人操作的，从而 http本身不会记住"过去的"数据。

2 Session

用于解决 http 无状态问题。一般称为“会话控制”，浏览器在第一次访问服务器时，服务器会创建一个 session，然后同时为该 session 生成一个唯一的会话 sessionid。

Session 存储特定用户会话所需的属性及配置信息，当用户在应用程序的 Web 页之间跳转时，存储在 Session 中的变量将不会丢失，而是在整个用户会话中一直存在下去。当用户请求来自应用程序的 Web 页时，如果该用户还没有会话，则 Web 服务器将自动创建一个Session 对象。当会话过期或被放弃后，服务器将终止该会话。Session 最常见的一个用法就是存储用户的首选项。

3 Cookie

有时也用其复数形式 Cookies，指某些网站为了辨别用户身份、进行 session 跟踪而储存在用户本地终端上的数据（通常经过加密）。

Cookie 技术诞生以来，它就成了广大网络用户和 Web 开发人员争论的一个焦点。有一些网络用户，甚至包括一些资深的 Web 专家也对它的产生和推广感到不满，这是因为 Cookie的使用对网络用户的隐私构成了危害。因为 Cookie 是由 Web 务器保存在用户浏览器上的小文本文件，它包含有关用户的信息。当 Web 服务器创建了 Cookies 后，只要在其有效期内，当用户访问同一个 Web 服务器时，浏览器首先要检查本地的 Cookies，并将其原样发送给 Web服务器。

查看 Cookie：

在线咨询

上一篇：在IE浏览器中，使用PHPExcel导出文件时，文件
下一篇：Java专家教你Eclipse的使用技巧

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

OpenSNN推文：CSS新手指南：小白速成课001

一、基础概念

1. 什么是CSS

2. CSS的作用

二、学习资源

1. 在线课程和学习平台

2. 书籍

三、基础语法

1. CSS语法

2. 引入CSS

四、选择器

1. 基本选择器

2. 组合选择器

3. 伪类和伪元素

五、盒模型

1. 盒模型概念

2. 盒模型属性

六、布局

1. 传统布局

2. 现代布局

七、响应式设计

1. 媒体查询

2. 弹性单位

八、实战练习

1. 创建一个简单的网页

2. 参与在线项目

九、持续学习

、 HTML 语言

二、 常用 HTML 标记

三、 Session 和 Cookie

您的项目需求

二、常用 HTML 标记