Html5 JumpStart学习笔记2:CSS Selectors and Style Properties
Module Agenda(模块列表)
Selectors
Combinators
Color properties
Text properties
Box properties
1. Selectors
type selectors
.class selectors
#id selecors
[attribute] selectors
eg:
[data-author=psmith]{color:red;} [data-author$='smith']{color:red;} /*data-author属性以smith结尾*/
:pseudo-class and ::pseudo-element selectors
eg:
/*::和:的区别我不是很理解,还望有人指点*/ p::first-line{color:red;} p:hover{color:red;} li:nth-child(2n+3){color:red;}/*第3、5、7...变红,注意这里是从1开始,不是从0开始*/
the universal selector
2. Combinators
descendant combinator (后代选择器) eg: #Div1 div{color:red;}
child > combinator (子选择器) eg: #Div > p{color:red;}
注意:后代选择器与子选择器的区别:后代包括子元素、孙元素,子仅指子元素。
general ~ sibling (兄弟选择器) eg: ul ~ div{color:red;}
adjacent + sibling (相邻选择器) eg: li + li{color:red;} /*这样可以在不能定位ul的情况下选到ul下的所有li*/
3. Color properties
color
named color eg: p{color:goldenred;}
hex(#) eg: p{color:#0000ff;}
rgb()/rgba() eg: p{color:rgb(0,255,0);} p{color:rgba(0,255,0,0.5);} /*a是透明度*/
hsl()/hsla eg: p{color:hsl(0,50%,90%);} /* H: hue,色调, S: saturation 饱和度 L: lum 亮度*/
opacity
4. Basic text properties
text-decoration:overline | underline | line-through
text-transform:none | lowercase | uppercase | capitalize
text-shadow(i.e.,2px 2px gray)
/*text-shadow属性的值可以有多个*/ table{text-shadow:-4px -4px 4px red; 0 0 10px blue;font-size:24pt;}
效果如下:
Font properties
font-style:normal | italic(斜体)| oblique
font-varant:normal | small-caps
font-weight:normal | bold | bolder | light | lighter | #
font-size:{length}
line-height:{length}
font-family:{font}
font shorthand property(忘了什么意思了,知道的提醒下)
@font-face:defines a font to be used elsewhere in your css
eg:
/*CSS snippet*/ @font-face{font-family:"niftyfont";src:url("/type/nifty_n.woff") format(woff) }.nifty{font-family:niftyfont }
5. Border, margin and padding
eg:#lorem{border:2px solid black;}
Sizing
width
height
min/max perfixes
box-sizing(content-box | border-box) 规定box的大小按content算还是按border算
Visibility
display(inline | block | inline-block | none | ...)
visibility(visible | hidden)
其中,display:none和visibility:hidden的区别:当visibility被设置为"hidden"的时候,元素虽然被隐藏了,但它仍然占据它原来所在的位置。
white-space(normal | pre | nowarp | pre-wrap | pre-line)
overflow(visible | hidden | scroll | auto)
box-shadow and border-radius
box-shadow(i.e.,10px 10px 5px #888888)
border-radius(i.e., 5px)
Gradients(渐变)
/*linear gradient*/ background-image:linear-gradient(to right,black 0%,white 100%)/*radial gradient*/ background-image:radial-gradient(circle at 50% 50%,black 0%,white 100%)
转载于:https://www.cnblogs.com/jacktag/archive/2013/03/09/2951795.html
Html5 JumpStart学习笔记2:CSS Selectors and Style Properties相关推荐
- Html5 JumpStart学习笔记3:Advanced Layout and Animation
Module Agenda Legacy(遗产) layouts Flexbox Grid Transforms Transitions(过渡.转变) and Animations 1.Legacy ...
- 前端HTML5+CSS3学习笔记
HTML5+CSS3学习笔记 ==CSS第一天== 一.css简介 二.css语法规范 三.css代码风格 四.css选择器的作用 五.css基础选择器 1.标签选择器: 2.类选择器 3.多类名选择 ...
- 千峰HTML5+CSS3学习笔记
千峰HTML5+CSS3学习笔记 文章目录 千峰HTML5+CSS3学习笔记 写在前面 1. 前言 2. HTML 3. CSS 3.1 选择器 3.2 CSS属性 4. 盒子模型 4.1 溢出属性 ...
- HTML5+CSS3学习笔记(第1章)HTML基础
HTML5+CSS3学习笔记(第1章)HTML基础 今天是居家隔离第一天,自学HTML5. 1.1HTML概述 什么是HTML HTML是一种标记语言.(Hyper Text Markup langu ...
- HTML5+CSS3学习笔记(三)文档流和盒子模型【附练习:图片列表、左侧导航栏】
HTML5+CSS3学习笔记(三) 本系列更多文章,可以查看专栏 HTML+CSS学习笔记 文章目录 HTML5+CSS3学习笔记(三) 一.CSS布局 1. 文档流(块级元素.行内元素.行内块元素) ...
- rem和em学习笔记及CSS预处理
rem和em学习笔记及CSS预处理 1.当元素A的字体单位是n rem时,它将根据根元素(html)的font-size的大小作为基准,比如 View Code parent-div中的em-div ...
- Mr.J-- jQuery学习笔记(七)--CSS类操作文本值操作
不了解属性以及属性操作的同学可以看我之前的博客:Mr.J-- jQuery学习笔记(五)--属性及属性节点 下面demo 中btn用到的角标,之前写验证码动态强度测试时也用过同样方法:Mr.J--密码 ...
- Webpack4 学习笔记二 CSS模块转换
前言 此内容是个人学习笔记,以便日后翻阅.非教程,如有错误还请指出 webpack 打包css模块 webpack是js模块打包器, 如果在入口文件引入css文件或其它的less.sass等文件,需要 ...
- 二、HTML5 + CSS3 学习笔记
一.HTML + CSS 文章目录 前言 一.HTML5 新增特性 1. HTML5 概述 2. HTML5 新特性 2.1 HTML5 布局元素标签 2.2 HTML5 媒体元素标签 二.CSS3 ...
- 奇舞学院学习笔记之CSS一页通
CSS概念与简单选择器 版本 CSS Level 1 CSS Level 2(CSS2.1规范) CSS Level 3 Color Module Level 3 Selectors Level 3 ...
最新文章
- 解决nginx使用proxy_pass反向代理时,session丢失的问题
- Java Web -【分页功能】详解
- 推荐系统炼丹笔记:EdgeRec阿里边缘计算推荐系统
- Android FileUtil(android文件工具类)
- tampermonkey脚本header介绍
- 删除 java代码中所有的注释
- sqli-labs在线网站
- 互联网行业人才格局大换血,BAT 已换位?
- 【同步】文件同步rsync |自动同步软件FreeFileSync
- otdr测试曲线图软件通用,OTDR常见测试曲线
- awk , 统计secure.log中 每个破解你密码的ip的出现次数|access.log 中 每个ip地址出现的次数...
- Apache Ranger KMS 部署文档
- java中的match函数_javascript中match函数的用法小结
- [TYVJ3097/3121/3369] 战略游戏
- 一文学会会计记账-会计科目、借贷关系和会计分录的小白理解
- 视频搬砖项目【一个技术员是如何轻松利用视频搬运项目做到日入2000+】
- python读取stl文件三维坐标_python vtk 读取三维raw数据存为stl
- C语言实现可伸缩的栈结构
- codec2中的函数命名后缀vb nb sm
- oralc UPDATE关联表的思路总结