基础CSS笔记(一)
来源:互联网 发布:淘宝申请企业店铺条件 编辑:程序博客网 时间:2024/04/27 22:16
一
每种浏览器都有其默认的页面格式,但是各个浏览器之前的默认格式差异不大。我们在学习CSS的时候需要知道有默认格式的存在,以便于再以后编辑CSS时有效的利用或者克服不同浏览器之前的默认格式,使自己设计的网站能兼容更多的浏览器
比如:
<body style="color:red;"> <a href="#">我是什么颜色</a></body>上面的例子:运行出来其实是蓝色,但body里面设置的是红色啊,这就是浏览器的默认格式在作怪,如何解决?我们只需要重写这个默认格式就可以了
<body style="color:red;"> <a href="#" style="color:red;">我是什么颜色</a></body>
二
CSS 中有三类选择器:
ID选择器,类选择器,标签选择器
css中的格式 对应html中的属性
ID选择器: #selector{declaration} id="selector"
类选择器: .selector{declaration} class="selector"
标签选择器 如:li{declaration} <li></li>
其中 相同名字的ID选择器在一个页面应该是唯一的,虽然也可以多次使用,但ID一般都是唯一的,因为在JavaScript中还需要id来传参数什么的,如果ID不唯一,参数不能传
而类选择器则可以使用多次
三
在html中添加css的三种方式:
1、Inline styling 行内方式
<div style="position:absolute; top:0; left:0; width:100%;"></div>
2、embedded styling 嵌套方式
<pre name="code" class="html"><pre name="code" class="html"><pre name="code" class="html"><head> ...... <style> p{ font-size:20px; }/*作用于所有的p标签,标签选择器*/ .header{ color:green; }/*属于类选择器*/ </style></head><body> <h1 class="header">welcome to my blog!!!</h1>/*引用上面的类选择器*/</body>
需要注意的是:<style>属性标签需要放在<head></head>里面,在后面我会把html中关于这方面的知识点补上
3、External style sheets 额外的css样式文件
<head><span style="white-space:pre"></span><link rel="stylesheet" type="text/css" href="css/syntax.css"> /*通过这句话引入css文件,同样是要写在head标签里面*/</head>
四
CSS中可以加入注释:
格式就是
/*注释的内容*/
在css文件中加入注释,可以让开发者一段时间在返回来修改看自己的代码时效率更高,
使用注释可以很好的把css里面的各个部分分管的样式分隔开,不仅有利用开发者的后期开发和修改,在一个团队里面,也有助于其他队友(开发者)更容易理解自己所写的代码。
五
冲突与级联:
冲突:
当一个html中,同一个标签有多个css样式进行限制时,行内样式的优先级>嵌套样式>css文件中下方的标签的样式>css文件中上面出现的标签样式
级联:
级联使浏览器更加明确自己要利用css设置哪些标签
直接看例子,如下:
代码中可以发现所有的css样式都是关于标签<h1>的,当我们运行如下代码的时候,最终两个<h1>标签中的文字是什么颜色呢?
答案是:Selector是黄色,In css是粉色。
原因就在于CSS中的冲突与级联:
当运行html时,首先他会看到<link> 随后找到CSS文件,在CSS文件中他首先看到了h1{..red}于是浏览器知道h1要设置成红色,可随后他又看到了另一个h1{..green}所以就又知道要改成绿色,加载完css文件之后,他看到了<style>标签,又一次明白要改成粉色,最后在body中他看到了<h1>就会设置里面的内容为粉色字体,但在<h1 style="color:yellow;">有行内样式style,因此当浏览器看到他就会将这个标签包括的字变成黄色。
CSS中,看到p{......},会设置body中的所有p标签字体为30px,随后看到了 #header p{.....},明确指出要设置header下的p标签,优先级更高,所以div id="header"里面的p标签会是20px。 这就是级联。
html文件:
<pre name="code" class="html"><!doctype html><html> <head> <title>CSS for Beginner</title> <link rel="stylesheet" type="text/css" href="css/syntax.css"> <span style="white-space:pre"></span><style> <span style="white-space:pre"></span> h1{<span style="white-space:pre"></span>color:pink; <span style="white-space:pre"></span> } <span style="white-space:pre"></span></style> </head> <body> <div id="header"> <h1 style="color:yellow;">Selector</h1> <h1>In css</h1> <p>Welcome to my blog!</p> </div> <p>Hello there ninjas!</p> </body></html>
CSS文件:
<pre name="code" class="html">h1{ color: red;}h1{ font-size: 32px; color: green;}p{font-size:30px;}#header p{font-size:20px;}
六选择器的使用:
<!doctype html><html> <head> <title>CSS for Beginner</title> <link rel="stylesheet" type="text/css" href="css/syntax.css"> </head> <body> <div id="header"> <h1>Selector</h1> <h1 class="test">In css</h1> <h1>Welcome to <strong>my</strong> blog!</h1> </div> <h1>Hello there ninjas!</h1> </body></html>
syntax.css:
<pre name="code" class="html">h1{ color: red;}#header h1{ color: green;}.test{ color:yellow;}strong{ color:blue;}
在CSS中:
- 基础CSS笔记(一)
- css基础学习笔记(一)
- CSS基础(一) 个人笔记
- CSS学习笔记(一)CSS 基础语法
- HTML/CSS基础笔记一
- CSS基础学习笔记(一)
- CSS基础(一)
- CSS基础(一)
- CSS基础(一)
- CSS基础(一)
- 学习笔记(一) HTML+CSS基础课程
- CSS学习笔记--基础(一)
- 慕课网《HTML+CSS基础课程》笔记总结(一)
- CSS基础(笔记)
- CSS 笔记(一)
- css 笔记(一)
- 《HTML+CSS基础课程》学习笔记一
- HTML + CSS 基础(一)
- hadoop笔记
- hadoop中mapreduce程序的几种提交运行模式
- Android动画三:属性动画 (property animation)
- linux 网络配置
- Tsinsen A1115 高精度计算
- 基础CSS笔记(一)
- Leetcode:2. Add Two Numbers
- POJ 1459 Power Network 最大流
- Stegano之binwalk、C32Asm
- Android canvas绘图基础之运动的时钟
- Exception(一)
- wait()、notify()、notifyAll()
- Spring4新特性——集成Bean Validation 1.1(JSR-349)到SpringMVC
- Adnroid ViewPage 使用