HTML/CSS初步了解
一、CSS是什么?
它是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS为HTML标记语言提供了一种样式描述,定义了其中元素的显示方式。CSS在Web设计领域是一个突破。利用它可以实现修改一个小的样式更新与之相关的所有页面元素。
那么 html ccs javascript 分别起到1了什么作用呢?
HTML | CSS | javaScript |
结构 | 样式 | 行为 |
要分清楚他们分别负责什么。
二、CSS是干什么的?
比如那么说:盖一层楼,你要先盖后装修,光给你装修涂料有意义吗,肯定是要先盖好楼,才能装修,所CSS就是装修涂料,它自己没办法单独存在,必须依靠结构,它没有html的存在,CSS一点意义都没有。
三、引入CSS的三种方法
CSS(cascading style sheet)层叠样式表
1、行间样式
<!DOCTYPE html> <html> <head> <title>CSS</title> <head> <body> <div style=" width:100px; height:100px; background-color:green;"> </div> </body> </html>
运行效果:
2、页面级CSS
先来初步了解一下,页面级就是在head里面写一个标签叫<style></style>
<!DOCTYPE html> <html> <head> <title>CSS</title> <style> div{ width:100px; height:100px; background-color:green; } </style> <head> <body> <div></div> </body> </html
3、外部CSS文件(重点)
是最高大上,最实用,在开发中经常用到的
首先,我们要建一下文件,起个名名字后缀名要写出CSS
那如何如何将css文件和html联合起来呢?
用link标签:<link rel="stylesheet" type="text/css" href=" ">herf是放css文件的
<!DOCTYPE html> <html> <head> <title>CSS</title> <link rel="stylesheet" type="text/css" href="lesson.css"> <head> <body> <div></div> </body> </html>
CSS文件:
div{ width:100px; height:100px; border-radius:50%;//圆角属性 background-color:green; }
这样就是成功的引用了外部的CSS。
四、选择器
第一种选择器叫ID选择器
在div里面写一个id,通过这个id就能找到这个div。
<!DOCTYPE html> <html> <head> <title>CSS</title> <link rel="stylesheet" type="text/css" href="lesson.css"> <head> <body> <div id="only">123456</div> </body> </html>
怎么找呢,首先在css文件里面以#开头,之后id的值是什么就写什么之后{里面写css代码}
#only{ background-color:red; }
提示:一个元素只能有一个id值,一个id值只能对应一个元素
简单说就是一点id的命名,只能有一个。
第二种选择器叫IClass选择器
<!DOCTYPE html> <html> <head> <title>CSS</title> <link rel="stylesheet" type="text/css" href="lesson.css"> <head> <body> <div class="demo">123456</div> </body> </html>
Class选择器和id选择器差不多 以点(.)开头,后面写class值
.demo{ background-color:red; }
提示:如果我用两个class及值相同可以吗。
答:是可以的
<!DOCTYPE html> <html> <head> <title>CSS</title> <link rel="stylesheet" type="text/css" href="lesson.css"> <head> <body> <div class="demo">123456</div> <div class="demo">78910</div> </body> </html>
.demo{ background-color:red; }
运行效果:
我那如想要改变背景色是红色同时字体是黄色,要如何做
那就可以在后面加多一个dmeo1
代码如下:
<!DOCTYPE html> <html> <head> <title>CSS</title> <link rel="stylesheet" type="text/css" href="lesson.css"> <head> <body> <div class="demo demo1">123456</div> <div class="demo">78910</div> </body> </html>
.demo{ background-color:red; } .demo1{ color:yellow; }
运行效果:
class选择器多对多。
第三种选择器叫标签选择器。
标签选择器直观明了,想选择元素的话,直接写上标签名称就好了
在css文件里面写上div,那么在html里面的所以div标签都可以改变。
<!DOCTYPE html> <html> <head> <title>CSS</title> <link rel="stylesheet" type="text/css" href="lesson.css"> <head> <body> <div>123456</div> <div>78910</div> <div>4545</div> <div>743543</div> <div>345345</div> <div>34879</div> </body> </html>
div{ background-color:red; }
运行效果:
第四种选择器叫I通配符选择器
通配符的表现形式极其的单一 (*)代表全部,自己成为选择器
<!DOCTYPE html> <html> <head> <title>CSS</title> <link rel="stylesheet" type="text/css" href="lesson.css"> <head> <body> <span>123</span> <div>abc</div> <strong>454</strong> </body> </html>
*{ background-color:yellow; }
运行效果:
这时会看见页面全黄了,为什么呢?
不是说吗,*是代表所以全部呢
<html><body>也都是标签,所以代表全部文档,所以这叫通配符选择器。
五、对比选择器优先级
先来对比运行id选择器和class选择器的优先级
<!DOCTYPE html> <html> <head> <title>CSS</title> <link rel="stylesheet" type="text/css" href="lesson.css"> <head> <body> <div id="only" class="demo">123</div> </body> </html>
css代码:
#only{ background-color:yellow; } .demo{ background-color:red; }
运行效果:
这里可以看出来id选择器的优先级更高。
再看class选择器和标签选择器对比
div{ background-color:yellow; } .demo{ background-color:red; }
运行效果:
这里就是可以看出class选择器优先级高
总结:id选择器>class选择器>标签选择器>通配符选择器。
第五种选择器叫I属性选择器
是可以通过属性选择的,比如有一个属性名叫id,那么有id的属性值的都能被选出来。
代码如下:
<!DOCTYPE html> <html> <head> <title>CSS</title> <link rel="stylesheet" type="text/css" href="lesson.css"> <head> <body> <div id="only" class="demo">1232</div> <div id="only2" class="demo">aaa3</div> <div id="only3" class="demo">2334</div> </body> </html>
css代码:
[id]{ background-color:yellow; }
运行效果:
HTML/CSS初步了解的更多相关文章
- Html/CSS 初步介绍html和css部分重要标签
&初步介绍html和css部分重要标签& 注:开头书写:<!DOCTYPE html>表明对应标准html代码 先行总结重点 下方给出具体 CSS: 1. position ...
- 2016 - 1 - 25 CSS初步 (二)
1.The customising link We can change the link's style when we move our pointer on the link like that ...
- 关于CSS初步入门简述1
关于CSS的简介可以自行百度,本篇只考虑内容 首先关于CSS会由浅入深,写在前面的有很多不严谨,只是为了引出后文所写.不过如果谬误较大,敬请指正! 1.大部分的代码要写在之中 简单的例子: <b ...
- 2016 - 1 - 24 CSS初步
1.The difference between CSS and HTML HTML document is that it specities the content of the page. An ...
- CSS初步学习
1.选择器: 如果你要在HTML元素中设置CSS样式,你需要在元素中设置"id" 和 "class"选择器. id 选择器 id 选择器可以为标有特定 id 的 ...
- Html/Css 初步认识笔记
1.什么是 HTML ? HTML(HyperText Markup Language) 的学名是超文本标记语言. 标记用来表示网页内容要如何显示,自身不显示 .<我就是标记> 标记成对出 ...
- CSS初步了解
CSS 概述 个人理解为对html的扩展,对html关键字进行功能添加. CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表 ...
- Css初步认识
css 美化页面 cascading style sheet 层叠样式表 css语法: 选择器{ css属性名:属性值;css属性名:属性值;} css引入方式: 方式一:内联样式表 通过标签 ...
- CSS初步理解
近期在学习牛腩的时候遇到了网页的制作.挺新奇的.其中涉及到了有关CSS的知识,于是乎自己也就花费两个小时的时间.找了本浅显易懂的书来看了一遍,从宏观上来了解CSS的相关内容.有关CSS的基础知识详见下 ...
随机推荐
- 第三次 orm自动建表及遇到的问题
Hibernate支持自动建表,在开发阶段很方便,可以保证hbm与数据库表结构的自动同步. 方法很简单,在hibernate.cfg.xml内加入 <property name="hi ...
- js基础进阶--编码实用技巧(二)
我的个人博客:http://www.xiaolongwu.cn 接上篇文章 js编码的实用技巧(一) 5.合理利用||运算符 使用||可以作为参数之外的默认值,当第一个参数返回值为false时,那么第 ...
- File文件的读写操作RandomAccessFile类
1.Java提供了一个对文件随机访问的操作,访问包括读和写操作,该类名是RandomAccessFile,该类的读写是基于指针的操作. 2.RandomAccessFile在堆文件进行随机访问操作时有 ...
- Tomcat配置与优化(内存、并发、管理)与性能监控
原文链接:http://blog.csdn.net/xyang81/article/details/51530979 一.JVM内存配置优化 在开发当中,当一个项目比较大时,依赖的jar包通常比较多, ...
- 执行指定iframe页面的脚本
mark一下,通过jQuery执行指定iframe页面里面的脚本,当前仅知道页面名称. $(window.top.document).find('iframe[src="pagesrc&qu ...
- Step by step guide to set up master and slave machines on Windows
Note: There is no need to install Jenkins on the slave machine. On your master machine go to Manage ...
- Eclipse中导入项目后js报错解决方法
http://blog.csdn.net/chenchunlin526/article/details/54666882 原因是因为开启了js的校验功能 不影响项目 如需去除错误标志按链接文档操作即可 ...
- app后端设计(10)--数据增量更新
在新浪微博的app中,从别的页面进入主页,在没有网络的情况下,首页中的已经收到的微博还是能显示的,这显然是把相关的数据存储在app本地. 使用数据的app本地存储,能减少网络的流量,同时极大提高了用户 ...
- 巩固java(二)----JVM堆内存结构及垃圾回收机制
前言: 我们在运行程序时,有时会碰到内存溢出(OutOfMemoryError)的问题,为了解决这种问题,我们有必要了解JVM的内存结构和垃圾回收机制. 正文: 1.JVM堆内存结构 ...
- CentOS7上解决tomcat不能被外部浏览访问的问题?
在linux上开启的tomcat使用浏览器访问不了.主要原因在于防火墙的存在,导致的端口无法访问. CentOS7使用firewall而不是iptables.所以解决这类问题可以通过添加firewal ...