html嵌套css样式:
1.外部(推荐)
2.内部
3.内联(不推荐)

css优先级
1.内联
2.id选择器
3.class选择器
4.标签

css长度单位:
1.px
2.em (14px)

css选择器:
常用选择器
基本选择器
层级选择器
伪类选择器
属性选择器

常用选择器:
1.标签
2.id
3.class
4.关联
.div1 .imgcls{

}

5.组合
.div1 .imgcls,.div2 .imgcls{

}

基本选择器:
1.:first-child
2.:first-letter 第一个字符
3.:first-line 第一行
4.:last-child
5.:nth-child(2)

层级选择器:
a,b 和
a b 选择后代
a>b 选择子集
a+b a后面的b

伪类选择器:
:hover 划过上方
:focus 获得焦点
::selection 选择

属性选择器:
[id] 含有属性
[id=use1] 属性等于
[name*=us] 包含us
[name|=en] 以en开头
[name^=en] 以en开头
[name$=en] 以en结尾

常见的样式属性和值:
1.字体和颜色
2.背景
3.文本
4.边框
5.鼠标光标
6.列表
7.定位
8.内外边距
9.浮动和清除浮动
10.滚动条
11.显示和隐藏

字体:
font:
font-size: 字体大小
font-family: 字体类型
font-style: 字体样式(斜体italic)
font-weight: 字体粗细(bold加粗)

文本:
letter-spacing 字间距
word-spacing 词间距
text-decoration none|underline|overline|line-through 横线
text-align left|center|right 文字对齐
text-indent 首字母缩进
line-height 行高
color 颜色
word-break 自动换行

背景:
background
background-color 背景色
background-image 背景图片
background-repeat 背景图片是否重复(平铺)
background-attachment 背景图随内容滚动(用在body身上,其他不适用)
background-position

边框:
1.border-style solid实线 dotted小虚线 dashed小横线 double双线 groove凹 ridge凸 inset凹槽 outset凸槽
2.border-width
3.border-color
4.border-left right bottom top

鼠标:
cursor:crosshair十字 pointer小手 text文本 wait等待 default默认 help帮助

列表:
list-style-type

1.none空|desc实心圆|circle空心圆|square实心方块|decimal数字|lower-roman小写罗马数字|upper-roman大写|lower-alpha小写字母|upper-alpha大写字母
2.list-style-type:none; 列表前面的选项图标取消
3.text-decoration:none; a标签下划线取消

尺寸:
height:
max-width:
max-height:

文本框:
textarea
width:
height:
resize

样式继承:
文字有关的样式会继承下去
font-size:
font-family:
font-style:
color:
line-height:
font-weight:
word-spacing:

表格:
border-collapse: collapse边框合并|separate不合并
border-spacing: 间距

定位:
1.position: absolute绝对定位|relative相对定位
2.top
3.left
4.定位
5.z-index z轴

绝对定位和相对定位:
1.相同点:
脱离文档流,在文档流上方
2.不同点
坐标系不同,绝对的坐标系在浏览器左上角,相对的坐标系在自己的左上角
占位
绝对不占位,相对占位

div绝对居中:
1.父div:position:relative;
2.子div:position:absolute

外边距:
margin-right:
margin-left:
margin-top:
margin-bottom: 10px;
如果只提供一个,将用于全部的四边。
如果提供两个,第一个用于上-下,第二个用于左-右。
如果提供三个,第一个用于上,第二个用于左-右,第三个用于下。
如果提供全部四个参数值,将按上-右-下-左的顺序作用于四边。

内边距:
padding

浮动:
float

清除(阻止)浮动
clear left|right|both
可以有效防止盒子回缩
<div style='clear:both'></div>

滚动条:
overflow: hidden隐藏|auto自动|scroll出现滚动条

显示和隐藏:
1.display:none隐藏|block块显示|inline行显示
2.visibility:visible显示|hidden隐藏

边框样式:
1.border-radius
第一个值是水平半径。
如果第二个值省略,则它等于第一个值,这时这个角就是一个四分之一圆角。
如果任意一个值为0,则这个角是矩形,不会是圆的。
值不允许是负值。
2.box-shadow <length>水平偏移 <length>垂直偏移 <length>阴影模糊值 <length>阴影外延值 || <color>颜色
box-shadow: 5px 5px 5px 0px #999;
none: 无阴影
<length>①: 第1个长度值用来设置对象的阴影水平偏移值。可以为负值
<length>②: 第2个长度值用来设置对象的阴影垂直偏移值。可以为负值
<length>③: 如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值
<length>④: 如果提供了第4个长度值则用来设置对象的阴影外延值。可以为负值
<color>: 设置对象的阴影的颜色。
inset: 设置对象的阴影类型为内阴影。该值为空时,则对象的阴影类型为外阴影

3.border-image:
border-image: url('b.png') 26 26 round;
stretch | repeat| round | space
stretch: 指定用拉伸方式来填充边框背景图。
repeat: 指定用平铺方式来填充边框背景图。当图片碰到边界时,如果超过则被截断。
round: 指定用平铺方式来填充边框背景图。图片会根据边框的尺寸动态调整图片的大小直至正好可以铺满整个边框。
space: 指定用平铺方式来填充边框背景图。图片会根据边框的尺寸动态调整图片的之间的间距直至正好可以铺满整个边框。

4.background-size: 属性规定背景图片的尺寸
5.background-origin: 属性规定背景图片的定位区域
border-box边框区域
padding-box内边距区域
content-box有效区域

6.text-shadow 文字阴影
text-shadow:3px 3px 3px #f00;
7.word-wrap:break-word;单词折行
类似word-break
8.字体样式
@font-face
{
font-family: my;
src:url('my.ttf');
}

2D样式:
1.translate() 移动
2.rotate() 会改变坐标系
3.scale() 比例

3D样式:
1.rorateX(30deg);
2.rorateY(30deg);

多栏样式:
column-count
column-gap
column-rule

用户界面:
1.轮廓样式
outline-offset

强哥CSS学习笔记的更多相关文章

  1. 强哥jQuery学习笔记

    js对象: 1.js内置对象 2.js元素对象 3.jquery对象 js特效: 1.js元素对象 2.jQuery对象 jQuery学习: 1.核心函数 2.选择器 3.筛选 4.文档处理 5.属性 ...

  2. 强哥PHP学习笔记

    1.php的代码,必须放在.php的文件中,php代码必须写在<?php ?>之间. 2.//单行注释 /* 多行注释 */ 3.默认首页index.php index.html inde ...

  3. 强哥HTML学习笔记

    html 浏览器的选择:1.火狐2.ie3.chrome4.mac5.opera 安装两款插件:1.firebug2.web develope html页面元素:1.doctype2.htmlhead ...

  4. 强哥ThinkPHP学习笔记

    TP框架:1.模板引擎2.MVC设计模式3.常用操作类 模板引擎和框架区别1.模板引擎只是框架中用来做php和html分离 MVC设计模式M model 数据模型V view 视图C control ...

  5. 强哥MySQL学习笔记

    数据库服务器:1.数据库2.数据表 数据表:1.表结构(字段)2.表数据(记录)3.表索引(加快检索) 表引擎:1.myisam2.innodb 查看表字段desc table;删除数据库:drop ...

  6. 强哥memcache学习笔记

    搭建memcache服务器:1.在内存中缓存数据2.数据形态以key->value memcache优点:1.快速缓存2.跨域登录memcache缺点:1.复杂的数据存取的操作2.不能永久保存数 ...

  7. 强哥JavaScript学习笔记

    js文件放header头最后,js代码放body体最后 js语言定位: js是基于对象的语言 php.java是面向对象的语言 定义变量: var str="hello world" ...

  8. CSS学习笔记

    CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...

  9. HTML+CSS学习笔记 (7) - CSS样式基本知识

    HTML+CSS学习笔记 (7) - CSS样式基本知识 内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌 ...

随机推荐

  1. Linux下Matlab的安装

    1 概述 笔者环境Manjaro,本来想直接通过yay安装的,但无奈失败了,于是直接从官网下载进行安装. 2 下载安装包 Matlab官网可以戳这里,点击右上角的Get MATLAB就可以下载了: 没 ...

  2. Spring Boot demo系列(四):Spring Web+Validation

    2021.2.24 更新 1 概述 本文主要讲述了如何使用Hibernate Validator以及@Valid/@Validate注解. 2 校验 对于一个普通的Spring Boot应用,经常可以 ...

  3. 安装电脑思考到了Java设计模式:建造者模式

    目录 定义 意图 主要解决问题 何时使用 优缺点 结构 组装电脑的例子 定义 建造者模式是对象的创建型模式,可以将一个产品的内部表象与产品的生成过程分割开来,从而可以使一个建造过程生成具有不同的内部表 ...

  4. JAVAEE_Servlet_01_Servlet基础概念

    Servlet 基础概念 Java Servlet 是运行在 Web 服务器或应用服务器上的程序,它是作为来自 Web 浏览器或其他 HTTP 客户端的请求和 HTTP 服务器上的数据库或应用程序之间 ...

  5. 大一那会,我用QQ远程帮同学考过计算机二级

    考证 大一那会儿流行考证,什么普通话.教师资格证.计算机.商务英语各种证五花八门的. 我们非计算机专业(我是通信工程)的基本上都会去考一个叫计算机二级的证书,说是找工作有用,大一新生,哪懂这些,一窝蜂 ...

  6. java 读取ini文件

    1.情景:需要将硬代码写到文件中,这样以后改动只需改动灵活 1)txt文件,需要将这code字符串读到代码中,保存成数组 2)导包:pom.xml添加依赖: <dependency> &l ...

  7. 1061 Dating

    Sherlock Holmes received a note with some strange strings: Let's date! 3485djDkxh4hhGE 2984akDfkkkkg ...

  8. Weekly Contest 139

    1071. Greatest Common Divisor of Strings For strings S and T, we say "T divides S" if and ...

  9. 请解释Spring事务传播传播行为

    什么叫事务传播行为? 听起来挺高端的,其实很简单. 即然是传播,那么至少有两个东西,才可以发生传播.单体不不存在传播这个行为. 事务传播行为(propagation behavior)指的就是当一个事 ...

  10. hdu5247找连续数(打表)

    题意(中问题直接粘题意吧)                                 找连续数 Problem Description 小度熊拿到了一个无序的数组,对于这个数组,小度熊想知道是否 ...