css学习入门篇（1）

时间 2020-05-20

标签 css 学习入门栏目 CSS 繁體版

原文原文链接

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

解释：table是为了存储数据而div是为了架设页面，二者有不一样的工做职能。css

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

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

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

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

【2】内嵌样式：ide

缺点：每一个页面都要定义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”.