CSS学习

--------学习资源

http://www.csszengarden.com/

CSS语法检查http://jigsaw.w3.org/css-validator/

配置CSS的方法：

1.行内式

行内式通过直接设置元素的style属性来引入css

<div style="width: 100px; height: 100px;">行内式</div>

优点：元素的样式简单明了

缺点：代码不易维护

2.内嵌式

通过在head标签中加入style标签来引入CSS

<head>

<style type="text/css">

/*样式*/

</style>

</head>

缺点：不能被多个页面重复使用

3.链接式

通过link标签来引入CSS文件

<head>

<link type="text/css" rel="stylesheet" href="css/style.css">

</head>

优点：页面在加载元素的同时也会加载其样式

缺点：增加了http请求

4.导入式

通过在head标签中加入style标签及@import来引入CSS

<head>

<style type="text/css">

@import""

</style>

</head>

缺点：导入式会在整个页面加载完毕后，再加载CSS文件，这样会导致页面在打开时，先显示的是无样式的页面，闪烁一下之后，页面才有了样式

CSS选择符和声明：

CSS语法基础

  1. CSS样式规则选择符

选择符可以是HTML元素名称，类名或id

  1. CSS样式规则声明

声明是你要设置的CSS属性（例如颜色）及其值

一个选择符要配置多个属性可以用分号（；）

例：body{color: blue; background-color: yellow}将网页配置成黄底蓝字

如果需要更多的颜色就可以参考http://webdevbasics.net/color的”网页安全调色板”

body{color: #3399cc; background-color: #FFFFCC}将网页配置成浅黄底中蓝字

配置内联CSS：

通过修改style实现

<body style=" color: #008080;">

但是如果在body内<p style="color: red">文本 </p>就会覆盖了body的全局样本。如果有10个段落都需要以这种方式配置，就会造成大量冗余代码，因此并不高效

配置嵌入CSS：

嵌入样式应用于整个网页文档，这种样式要放到网页head部分的<style>元素中。

例子：

<head>

<title>Trillium Media Design</title>

<meta charset="utf-8">

<style>

body{ background-color: #E6E6FA;color: #191970}、

h1{background-color: #AEAED4;color: #191970}

</style>

</head>

配置外部CSS：

当CSS位于网页文档外部的时候，CSS的灵活性与强大才真正的显露无疑。外部样式表是包含CSS样式的文本文件，使用.css拓展名。这种.css文件通过link元素与网页关联。因此多个网页可以关联一个.css文件。.css文件不包含任何HTML标记----它只含CSS样式规则

优点是只需在一个文件内配置样式

Link元素

Link元素位于网页的head部分，是独立标记(void标记).link元素使用三个属性：rel , href和type

  1. rel属性的值是”stylesheet”
  2. href属性的值是.css文件名
  3. type的属性的值是”text/css”,这个是CSS的MIME类型。Type在HTML5中可选，但在XHTML中必须

例如

<link rel=”stylesheet” href=”color.css”>

CSS的class, ID和后代选择符

------这些东西都要放在<style></style>里

例子   <style>

.feature{color : #FF0000;}

    main p {color : #00ff00;}

#new {color: #FF00CC;}

</style>

Class选择符:

Class选择符配置一类CSS规则，并将其应用于网页的一个或多个区域，配置一类样式时，要将选择符配置成类名。在类名前添加句点符号（.）。类名必须以字母开头，可包含数字，连字号和下划线但是不能有空格，以下代码配置名为feature的一类样式

.feature{color: #FF0000;}

一类的样式可以应用于任何元素。这是使用class属性做到的

例：<li class=”feature”>123456</li>

ID选择符：

Class用于网页上多次响应使用，而id在每个网页上只能使用一次。配置id时记得在前面添加#号

#content{color:#333333;}

<div id=”content”>123456</div>

后代选择符:

用后代选择符在容器元素的上下文配置一个元素。

例如：将main元素中的段落配置成绿色文本

  1. main p {color : #00ff00;}

span元素

<span>元素在网页中定义一个上下不留空的内联区域。以<span>标记开头,以</span>结尾。适合格式化一个包含在其他区域（比如<p>

,<blockquote>或<div>)中的区域。

CSS的层叠（局部优先，作用范围越小越优先）

例如导入的.css中body { background-color: #FFFFCC（黄色）;

color: #000000（黑色）; }

但是同时又在html的head中定义

<style>

body { color: #0000FF（蓝色）; }

</style>

显示的页面为黄底蓝字

CSS的基础学习的更多相关文章

  1. CSS零基础学习笔记.

    酸菜记 之 CSS的零基础. 这篇是我自己从零基础学习CSS的笔记加理解总结归纳的,如有不对的地方,请留言指教, 学前了解: CSS中字母是不分大小写的; CSS文件可以使用在各种程序文件中(如:PH ...

  2. CSS入门基础学习二

    我们下午继续学习CSS的入门基础,搬上你的小板凳赶快进入吧! 一.背景(background) Background-color:背景颜色 background-image (背景图片) backgr ...

  3. CSS入门基础学习一

    一.CSS样式 1.什么是CSS: CSS是指层叠样式表(Cascading Style Sheels),CSS通常为CSS样式表或层叠样式表,主要用于设置HTML文本内容,以及版本面的布局等 2.H ...

  4. 【HTML】实战阿里云src页面css模仿基础学习

    实战结果页面gif图片 阿里云src首页模仿完整代码(500行左右) <!DOCTYPE html> <html> <head> <meta charset= ...

  5. 第六十九节，css入门基础

    css入门基础 学习要点: 1.使用CSS 2.三种方式 3.层叠和继承 本章主要探讨HTML5中CSS (层叠样式表),它是用来对HTML文档外观的表现形式进行排版和格式化. 一 使用CSS CSS ...

  6. Web编程基础--HTML、CSS、JavaScript 学习之课程作业“仿360极速浏览器新标签页”

    Web编程基础--HTML.CSS.JavaScript 学习之课程作业"仿360极速浏览器新标签页" 背景: 作为一个中专网站建设出身,之前总是做静态的HTML+CSS+DIV没 ...

  7. HTML&CSS基础学习笔记—创建列表

    创建一张表格 很多时候我们需要在网页上展示一些数据,使用表格可以很好的来展示数据. 在HTML中<table>标签定义 表格. <table> </table> 添 ...

  8. CSS基础学习中的几大要点心得

    CSS是前端学习中较为简单但又非常复杂的课程,说简单是因为学习它并不需要太多推理论证和逻辑思维,说它非常复杂则是更多的侧重在它的“杂”上,因为太多的格式和套路需要我们注意.以下谨列出本人在CSS学习中 ...

  9. HTML5移动开发学习笔记之CSS3基础学习

    CSS回顾 在学CSS3之前首先巩固下CSS的基础知识. 1.CSS框模型 举例子: #box { width: 70px; margin: 10px; padding: 5px; } 这个代码将出现 ...

随机推荐

  1. Spring Session工作原理

    本文首发于 vivo互联网技术 微信公众号 https://mp.weixin.qq.com/s/KCOFv0nRuymkX79-RZi9eg 作者:张正林 目录:1.引入背景2.使用方法3.工作流程 ...

  2. JavaWeb之JSP & EL & JSTL

    JSP & EL & JSTL JSP Java Server Page 什么是JSP 从用户角度看,就是一个网页.从程序员角度看,就是一个Java类,它继承Servlet,所以可以说 ...

  3. Redis中使用redis-cli及密码登录

    使用redis-cli登录后如果Redis中设置了密码那么输入密码可能会出现: NOAUTH Authentication required的错. 这个时候可以输入:auth password 进行登 ...

  4. kali linux查看局域网下所有IP，并对指定IP实施局域网内攻击(断网，随时查看对方密码，上网痕迹等)

    首先我们打开我们熟悉的kali linux操作系统,利用指令: ifconfig 来确认本机的ip地址 确认了本机的ip地址之后,利用一下的指令查看局域网下所有ip: fping -g 本机IP地址/ ...

  5. qt 使用OpenCV

    使用MinGW编译OpenCV源码 下载OpenCV源码.CMake编译工具 编译安装完: Qt工程配置 INCLUDEPATH += D:/qt_work/opencv/build/install/ ...

  6. iOS 常用算法之设计一个算法,验证某字符是否为合法IPV4字符

    浅析 : 一个IPV4字符由3个大于0小于255的数字 以及 3个点构成, 所有我们需要判断小数点数量是否满足条件, 以及小数点隔开的每部分是否满足条件即可. 思路: 1. 校验是否有3个小数点; 2 ...

  7. docker系列（三）：docker容器

    1 引言 在前面博文中,我们介绍了镜像.如果说镜像犹如面向对象中的类,本节要说的容器就是由类实例化出来的对象了,有了类才可以创建容器. 先从拉取一个官方提供的ubuntu最新镜像: $ docker ...

  8. 删除带外键的表【foreign key constraint fails】报错

    title: 删除带外键的表[foreign key constraint fails]报错 date: 2018-08-02 21:59:06 tags: 数据库 --- 遥想当时正在学hibern ...

  9. RAID 独立磁盘冗余阵列 - redundant array of independent disks

    RAID:  RAID全称是独立磁盘冗余阵列(Redundant Array of Independent Disks),基本思想是把多个磁盘组合起来,组合一个磁盘阵列组,使得性能大幅提高. RAID ...

  10. [PHP] PHP-FPM的access日志error日志和slow日志

    PHP-FPM的错误日志建议打开,这样可以看到PHP的错误信息:一般是这个配置路径 /etc/php/7.3/fpm/pool.d/www.conf,日志目录如果需要自己建立PHP目录,一定要把权限赋 ...