Basics CSS
来源:互联网 发布:php replace函数用法 编辑:程序博客网 时间:2024/06/01 07:30
NOTE
The combination of CSS and HTML
Style nature
1.内嵌
<div style="background=color:#06F ; color:#F00">
“:” sign the attribute “;” to separate it。
2.put it inside the head
层叠式
3.built a new css and quote it in the source file.
@import url(div.css) //in html
div {
style="background=color:#06F ;
color:#F00"
}
//in div.css
整合
@import url(second.css) //in html
@import url(div.css)
@import url(span.css) //in second.css
//in div or other css it is the same as the former one
4.Link(html link)
<link rel="stylesheet" type="text/css" href="..\css\second.css">
【CSS notes /……/】
CSS继承
Basic selector and priority
选择容器,作用在哪个标签上。
a)html 标签选择器 html中的标签名
b)Class选择器 使用标签中的class属性
分类使用class属性 <p class="ced"> //in html
p.ced{
background-color: #172894;
color: #539207;
} //in p.css
还可以对不同标签进行相同样式设定 .ced{
background-color: #172894;
color: #539207;
}//in p.css
All the label with the same class will be selected.
预定义样式可以实现动态加载
c)id选择器使用标签中的id属性
通常id的取值在页面中是唯一的,support the css and java
【优先级:style>id>class>html (style 直接写入域中)】
拓展选择器(常见)
a)关联选择器:两个或多个选择器之间产生关系the selector inside the selector
span b{
background-color: #09F;
color: #FFFFFF;
}//in p.css
b)组合选择器:对多选择器进行相同样式设定
选择器之间用逗号隔开,对于多个选择器,只要是符合的样式都会同时改变。 .ced ,div b{
background-color: #A34829;
color: #B93434;
}//in p.css
c)伪元素选择器
标签的某些状态,找标签,结合
1.超链接标签,状态最明显
超链接的状态
未访问: a:link{
background-color: #000000;
color: #FFFFFF;
text-decoration:none; /*取消下划线*/
font-size: 18px;
}
鼠标悬停: a:hover{
background-color: #FFFFFF;
color: #000000;
}
/only change the element style you signed here./
点击: a:active{
background-color: #314950;
color: #192474;
font-size: 72px;
}
访问后: a:visited{
background-color: #FFFFFF;
color: #000000;
font-size:24px;
}
/*其他标签div p ……也可使用悬停等一系列动作 div:hover{
}
【一般顺序: L V H A】
2.p标签
First line: div:first-line{
font-size: 64px;
color: #C18473;
}
First letter: p:first-letter{
font-size: 36px;
color: #D48914;
}
3.Text box文本框焦点伪元素focus
<input type="text"/> /*建立文本框*/
input:focus{
background-color: #239865;
}
/*填写时候的背景
- Basics CSS
- css: basics and text
- Basics
- [Codecademy] HTML&CSS 第五课:HTML Basics III
- 第一章:css介绍(CSS BASICS)Chapter 1 : Introduction to CSS
- Menu Basics
- XML Basics
- WAP Basics
- Internet Basics
- HTML Basics
- Xen Basics
- USB Basics
- DC Basics
- template basics
- maven basics
- OOP-basics
- RCU - Basics
- Git Basics
- 自定义View常用例子二(点击展开隐藏控件,九宫格图片控件)
- java-设计模式-责任链
- 微信序列号生成器架构设计及演变
- 文件内容查阅命令
- iOS笔记--oc语法10(动态类型)
- Basics CSS
- Android 通知用户更新或移除通知
- Java集合框架
- TCP 的三次握手 与 四次挥手详解(转载)
- View 的事件分发机制
- PHP-AES加密解密算法
- Round B APAC Test 2016
- 考研复习第13弹
- 使用lib.exe生成.lib文件