css学习入门篇（1）

1.网页制作的两大误区；【1】.网页用了Table，页面就不标准【2】.div标签越多越好。

解释：table是为了存储数据而div是为了架设页面，两者有不同的工作职能。

2.W3C标准：他不是一个标准，而是一系列标准的组合：结构标准（代表语言HTML）、表现标准（CSS）、动作标准（JavaScript）。

3.css控制页面的四种方式：

【1】行内样式：<p style=" color: #F00; background: #CCC; font-size: 12px;">行内样式 </p>

缺点：每个标签都要设置style标签，导致文件体积较大，HTML不够纯净，不利于搜索蜘蛛爬行，维护成本较高

【2】内嵌样式：

缺点：每个页面都要定义css代码，如果一个网站有很多页面，每个文件都很大，后期维护也很难度也大

【3】链接样式：推荐使用

优点：实现了页面框架HTML代码与表现CSS代码的完全分离，使得前期制作和后期维护都十分方便，并且如果要保持页面风格统一

【4】导入样式：

采用import样式导入CSS样式表

4.CSS选择器

【1】标签选择器：对标签统一声明css样式。

eg：

<!DOCTYPE html>

< html>

< head lang= "en" >

< meta charset= "UTF-8" >

< title>标签选择器 </ title>

< style type= "text/css" >

p {

font-size: 20 px; /*字体大小*/

background: #090; /*字体背景颜色*/

color: aqua; /*字体本身颜色*/

}

</ style>

</ head>

< body>

< p>标签选择器demo </ p>

</ body>

</ html>

优点：对统一标签属性进行了统一设置

缺点：如果页面中除了某个标签和其他标签属性不是一直的，那么这样写就不行了

【2】ID选择器：ID具有唯一性，给标签起个ID更具有针对性。

eg：

<!DOCTYPE html>

< html>

< head lang= "en" >

< meta charset= "UTF-8" >

< title>标签选择器 </ title>

< style type= "text/css" >

#one {

font-size: 20 px; /*字体大小*/

background: #090; /*字体背景颜色*/

color: aqua; /*字体本身颜色*/

}

</ style>

</ head>

< body>

< p id= "one" >ID选择器demo</ p>

</ body>

</ html>

优点：可以单独给某个标签定义属性，可以解决【1】中的弊端

【3】类选择器：就是给不同的标签赋予相同的css样式

eg：

<!DOCTYPE html>

< html>

< head lang= "en" >

< meta charset= "UTF-8" >

< title>标签选择器 </ title>

< style type= "text/css" >

. one{

font-size: 20 px; /*字体大小*/

background: #090; /*字体背景颜色*/

color: aqua; /*字体本身颜色*/

}

</ style>

</ head>

< body>

< p class= " one"> ID选择器demo</ p>

< div class= " one"> 此处为DIV标签内的文字</ div>

</ body>

</ html>

备注：ID和class可以同时使用，只是ID是#开头，class是.开头

【4】通用选择器：对整个HTML标签进行css样式定义

eg：

<!DOCTYPE html>

< html>

< head lang= "en" >

< meta charset= "UTF-8" >

< title></ title>

</ head>

< style>

* {

margin: 0; padding: 0;/*保证页面能够兼容多种浏览器，当然这样会影响性能，也可以用到那些就加那些*/

font-size : 20 px;

background :#000088 ;

color : brown ;

}

</ style>

< body>

< p>通用选择器 </ p>

< div>通用选择器 </ div>

</ body>

</ html>

备注：功能很强大，但是不够灵活，不建议使用

5.CSS选择器命名及常用命名：骆驼命名法，帕斯卡命名法，匈牙利命名法

命名是程序员最基本的，这里就不多做介绍，不了解的可以自己百度了解，很简单.

6.盒子模型：是XHTML+CSS布局页面中的核心！

刚开始接触的人来说理解可能有点晕，其实就是css标签中的四个属性：content(内容)、border(边框)、padding(内边距)、margin(外边距).

个人解释：我把一个网页当着是一个大的长方体，里面有很多小长方体，这些小长方体的写的内容就是content，小长方体的厚度我们理解为border，里面的内容和小长方体的距离我们认为是padding，小长方体和大长方体之间的距离可以认为是margin.

每个人理解方式不一样，可以选择其他的模型去帮助自己去记忆，最主要是去实战中不断用用这些标签属性帮助理解.

7.块状元素和内联元素：对定义理解可能觉得不好理解，在后续的实战中会慢慢理解，先理解定义，后面在写代码的过程慢慢对照定义深入理解

块状元素：一般是其他元素的容器，可容纳内联元素和其他块状元素，块状元素排斥其他元素与其位于同一行，宽度(width)高度(height)起作用。常见块状元素为div和p。

内联元素：内联元素只能容纳文本或者其他内联元素，它允许其他内联元素与其位于同一行，但宽度(width)高度(height)不起作用。常见内联元素为“a”.

转载于:https://blog.51cto.com/8986098/1610162

css学习入门篇（1）相关推荐

（转）web前端开发分享-css,js入门篇
关注前端这么多年,没有大的成就,就入门期间积累了不少技巧与心得,跟大家分享一下,不一定都适合每个人,毕竟人与人的教育背景与成长环境心理活动都有差别,但就别人的心得再结合自己的特点,然后探索适合自己的学 ...
主动学习入门篇：什么是主动学习？有哪些具体应用
文 | 淘系技术部初类来源 | 知乎在大数据和算力的助力下,深度学习掀起了一波浪潮,在许多领域取得了显著的成绩.以监督学习为主的深度学习方法,往往期望能够拥有大量的标注样本进行训练,模型能够学到 ...
android studio 学习入门篇
开发第一应用可以开发属于自己的应用,是否有点小激动?好吧!让我们开始,首先点击Start a new Android Studio Project创建工程: 接下来需要输入应用名称(第一个字母要大写 ...
TensorFlow学习——入门篇
本文主要通过一个简单的 Demo 介绍 TensorFlow 初级 API 的使用方法,因为自己也是初学者,因此本文的目的主要是引导刚接触 TensorFlow 或者机器学习的同学,能够从第一步开始 ...
【安卓开发】android studio 学习入门篇
以下内容转载自:https://blog.csdn.net/myosotis5/article/details/79208707 (为防止链接失效,特备份文章内容,侵删) 开发第一应用可以开发属于自 ...
和阿倪一起学习C语言（4），指针学习入门篇，通俗易懂介绍指针
目录前言一.内存二.指针前言本篇文章旨在向初学者通俗易懂的介绍指针,我大学的时候刚学C语言就是从指针开始迷惑,以至于后面老师讲课都迷迷糊糊的差点丢失了学习的兴趣.所以在这里我想告诉大家作为初 ...
深度学习入门篇--手把手教你用 TensorFlow 训练模型
欢迎大家前往腾讯云技术社区,获取更多腾讯海量技术实践干货哦~ 作者:付越导语 Tensorflow在更新1.0版本之后多了很多新功能,其中放出了很多用tf框架写的深度网络结构(https://git ...
深度学习入门篇(二)Lenet网络在caffe+QtCreator上部署应用
一.部署流程先参考上一篇博客,学会Lenet在caffe上训练 caffe+qt+lenet实现手写体识别源码下载地址. 把训练好的权重文件和深度神经网络部署到Qt上,实现手写体的识别. 环境要求( ...
pytorch学习入门篇（一）
PyTorch 是什么? 它是一个基于 Python 的科学计算包, 其主要是为了解决两类场景: NumPy 的替代品, 以使用 GPU 的强大加速功能一个深度学习研究平台, 提供最大的灵活性和速度 ...

css学习入门篇（1）

css学习入门篇（1）相关推荐

最新文章

热门文章