整理一下近一周学习的有关CSS的基础知识笔记：

CSS语法必须写在<style>标签中哦~
/*注释*/

【CSS常用背景属性】background

background-color:背景色

background-image:背景图,background-image: url(图片地址相对路径);背景图和背景色同时存在时，背景图会覆盖背景色

background-repeat：背景图重复方式 ，no-repeat不平铺 repeat平铺(默认) repeat-x水平平铺 repeat-y垂直平铺

background-size:背景图大小。

【指定宽度高度】
>>> 宽高的写法，第一个属性值为宽度，第二个属性值为高度，可以：①直接写像素 ②写百分比（父容器宽高的百分比）
>>> 当只有一个属性值时，默认为宽度。高度等比缩放。
当有两个属性值时，会按照指定的高度宽度进行压缩/拉伸显示。

【其他属性值】
>>> contain:图片等比缩放，缩放到宽或高的某一边等于父容器的宽高，另一边按照图片大小缩放（可能导致部分空余区域无法覆盖）
>>> cover:图片等比缩放，使背景图像完全覆盖背景区域。(可能导致背景图部分区域无法显示)

background-position：位置坐标、偏移量
>>> 指定位置：left/center/right top/center/bottom
当只写一个属性值时，另一个默认居中
>>> 填写坐标：水平位置 垂直位置 (像素或百分比形式)
① 当只写一个属性值时，默认写的为水平方向，则垂直居中
② 当使用像素时：图片的左上角往各个方向移动的实际距离
水平方向：正数右移 负数左移 垂直方法：正数下移 负数上移
(左负有正 上负下正)
③ 当使用百分数时，一般只能是正数。代表去掉图片后，剩余空白距离的分布比例。例如 background-position：30%; 水平方向去掉图片后，剩余区域3:7分

[颜色常用单位]
* 十六进制：#ffffff
* 颜色名称：red
* RGB颜色：RGB（255，255，255）
* ＲＧＢＡ：第四位数，表示透明度。可选值0~1

 [CSS常用文本属性]
1、字体、字号：
font-weight:字体的粗细，
可选属性值：bold加粗 lighter细体 100~900数值(400正常，700 bold)

font-size:字体大小 **PX **%（浏览器默认字体大小的百分比，绝大部分默认16px）

font-family:字体族，设置字体。
>>>多个字体样式间用逗号分隔，浏览器解析时，会从左往右依次解析，选择可用字体。
>>>一般前面使用具体字体名称，最后一个使用字体族类名称。
（常用字体族名称：衬线体serif 非衬线体sans-serif(常用) 等宽体Monospace）
>>>例如：font-family:Arial, 'Microsoft Yahei', sans-serif;

font-style:字体样式,正常(normal) 斜体(italic)

font-variant：small-caps; 将字母转为小型大写字体。

(了解)font缩写形式：font-style font-variant font-weight font-size line-height font-family
>>> 使用注意事项 ：
① 顺序必须严格按照上述顺序；
② 多个样式之间用空格分割，而且font-size/line-height 必须作为一对用/分割
③ font-size和font-family必须指定，其他样式不指定将采用默认样式显示；
>>> 例如：font:italic bold 75%/1.8 'Microsoft Yahei', sans-serif;
斜体 加粗 字号/行高 字体族(微软雅黑，非衬线字体族)

2、字体颜色：
color:字体颜色
opacity:透明度,0~1之间的数字。 调整时控件以及子控件均会透明，而使用rgba调整时，只会时本控件透明，子控件不会发生透明度变化。

3、行距、对齐等：
line-height:行高 ① 像素单位 48px ② 不带px 正常行高的倍数 ③百分数 同2
>>> 典型应用，调整控件中文垂直居中的方式：控件的height=控件的line-height

text-align:块级元素中行级元素的水平对齐方式 left center right

letter-spacing:字符间距,字与字之间的间距

text-decoration:文本修饰 下划线underline、删除线line-through、上划线overline、none


overflow:控制超出范围文本的显示方式(auto 根据文字多少自动显示滚动条，
scroll始终显示滚动条， hidden 超出范围文本隐藏)
可以通过overflow-x overflow-y分别设置水平垂直方向
text-overflow:设置多余文字的显示方式 ：clip裁剪掉 ellipsis省略号

>>>【重点】让每行多余文字显示省略号：
① white-space: nowrap; 如果是中文，需设置行末不断行
② overflow: hidden; 设置控件超出范围隐藏
③ text-overflow: ellipsis; 设置多余文本省略号显示

white-space: nowrap; 设置行末不断行显示

word-break: 浏览器默认在空格处断行，当一个单词长度超出范围时，会不断行显示， break-all 允许在单词内换行。

text-shadow:文本阴影，有四个属性值：
①水平阴影距离 必选，数值越大，阴影右移
②垂直阴影距离 必选，数值越大，阴影下移
③阴影模糊距离 可选，数值越大，阴影越模糊。默认为0，不模糊
④阴影颜色 可选，默认为黑色

text-indent:首行缩进，可用像素值调整缩进大小

text-stroke: -webkit-text-stroke: 0.2px #008000; 描边的粗细，描边的颜色

CSS常用选择器

【通用选择器】
1、写法：*{}
2、作用：选中页面中的所有的HTML标签
3、优先级最低

*{
/*background-color:red;*/
}

【标签选择器】
1、写法：HTML标签名{}
2、作用：选中所有对应的HTML标签，并修改其样式

li{
color: red;
font-size: 36px;
}

【选择器命名规范】
1、只能是字母，数字，下划线
2、开头不能是数字


【类选择器class选择器】
1、写法：.class名{}
2、调用：在需要修改样式的HTML标签上，
    使用class="选择器名"
3、优先级：当作用于同一层时，class选择器>标签选择器

.list{
color: blue;
}
【ID选择器】
1、写法：#选择器名{}
2、调用：在需要修改样式的HTML标签上，使用id="选择器名"
3、优先级：同一层时，id选择器>class选择器
4、ID选择器是唯一的！同一页面严禁出现同名ID！！！

#first{
color: green;
}

【后代选择器】
1、写法：选择器1 选择器2 .....选择器N{}
2、生效规则：选择器N必须是选择器N-1的后代

【子代选择器】
1、写法：选择器1>选择器2>……>选择器N{}
2、生效规则：选择器2必须是选择器1的【直接子代】……

div>ul>li{
background-color:yellow;
}

【交集选择器】
1、写法：选择器1  选择器2  ……  选择器N{}
2、生效规则：必须同时满足所有选择器，才会生效

li.list#first{
background-color:blueviolet;
}

【并集选择器】
1、写法：选择器1，选择器2，……，选择器N{}
2、生效规则：满足任意一个选择器，均可生效

.list#first{
background-color:greenyellow;
}

[选择器优先级]
1、就近原则：近者优先
2、当作用于同一层时：可用权重计算
权重划分：标签选择器 1
class选择器 10
ID选择器 100
行级样式表style="" 1000
#ul .li .li2 li{} 优先级权重121
li .li1 .li2 .lis2{} 优先级权重31
#ul #li li{} 优先级权重201

【三种使用CSS的方式】
1、行内样式表：直接在HTML开始标签中使用style=""的方式引用
特点：将CSS代码与HTML代码完全糅杂在一起，
不符合W3C关于内容与表现分离的要求。不利于样式复用；
优先级：最高。
2、内部样式表：在<head></head>中，
使用<style type="textx/css"></style>方式使用
特点：将CSS代码与HTML代码分离，但是没有彻底分离CSS文件与HTML文件，
不利于多页面复用样式。
3、外部样式表：使用link标签链接CSS文件。
<link rel="stylesheet" type="text/caa" href="css/0309CSS"/>
特点：实现了ＣＳＳ与ＨＴＭＬ的彻底分离，有利于样式复用及后期维护。
-->

【伪类选择器】
1、写法：选择器名：伪类状态{}
常见伪类状态
* ：link 未访问
* ：visitied 已访问
* ：hover 鼠标指上状态
* ：active 激活选定状态
注：当超链接同时具有以上四种状态，
则选择器必须按照上述序列排列
* ：focus 获得焦点，常用于input

【超链接常见的四种状态】
* a:link
* a:visitied
* a:hover
* a:active

【CSS入门基础，有需要的看过来哦】心境，心静，不轻言放弃！---致CSS的更多相关文章

  1. 第六十九节，css入门基础

    css入门基础 学习要点: 1.使用CSS 2.三种方式 3.层叠和继承 本章主要探讨HTML5中CSS (层叠样式表),它是用来对HTML文档外观的表现形式进行排版和格式化. 一 使用CSS CSS ...

  2. CSS入门基础学习二

    我们下午继续学习CSS的入门基础,搬上你的小板凳赶快进入吧! 一.背景(background) Background-color:背景颜色 background-image (背景图片) backgr ...

  3. 学起来 —— CSS 入门基础

    Hello,大家好! 小女来更博啦!CSS福利送上~~~ 首先给大家介绍一下CSS到底是什么? 一.CSS概念 W3C规范中,要求有三条:一 为"两个分离",二 为语言遵循语义化, ...

  4. CSS 入门基础

    一.CSS 介绍什么是CSS CSS 指的是层叠样式表(Cascading StyleSheet).在网页制作时采用层叠样式表技术, 可以有效地对页面的布局.字体.颜色.背景和其它效果实现更加精确的控 ...

  5. CSS入门基础

    认识CSS 传统HTML设计网页版面的缺点 CSS的特点 CSS的排版样式 13.1 认识CSS CSS的英文全名是Cascading Style Sheets,中文可翻译为串接式排版样式,并且CSS ...

  6. 13 ，CSS 入门基础,行内排版内嵌式排版和外部排版样式

    1.认识 CSS 2.传统 HTML 设计网页版面的缺点 3.CSS 的特点 4.CSS 的排版样式 13.1 认识CSS CSS的英文全名是 Cascading Style Sheets,中文可翻译 ...

  7. css入门基础知识

    一.CSS常用选择器 /*CSS注释*/ /*CSS修改页面中的所有标签必须借助选择器选中. 选择器中可以写多对CSS属性:每个属性名与属性值之间用:分隔,多对属性之间,必须用;分隔 选择器{ 属性1 ...

  8. HTML中CSS入门基础

    HTML.CSS 实用css有三种格式:内嵌:内联:外部: 分类:内联:写在标记的属性位置,优先级最高,重用性最差内嵌:写在页面的head中,优先级第二,重用性一般外部:写在一个以css结尾的文件中, ...

  9. CSS入门基础学习一

    一.CSS样式 1.什么是CSS: CSS是指层叠样式表(Cascading Style Sheels),CSS通常为CSS样式表或层叠样式表,主要用于设置HTML文本内容,以及版本面的布局等 2.H ...

随机推荐

  1. POJ2352Stars【树状数组】

    Stars Description Astronomers often examine star maps where stars are represented by points on a pla ...

  2. 老李分享： 并行计算基础&编程模型与工具

    在当前计算机应用中,对高速并行计算的需求是广泛的,归纳起来,主要有三种类型的应用需求: 计算密集(Computer-Intensive)型应用,如大型科学工程计算与数值模拟: 数据密集(Data-In ...

  3. Python Selenium设计模式-POM

    前言 本文就python selenium自动化测试实践中所需要的POM设计模式进行分享,以便大家在实践中对POM的特点.应用场景和核心思想有一定的理解和掌握. 为什么要用POM 基于python s ...

  4. 由if-else,switch代替方案引起的思考

    关键词:条件判断,多态,策略模式,哈希表,字典map 笔者在用python实现事件驱动后,发现python是没有提供switch语句,python官方推荐多用字典来代替switch来实现,这让我就觉得 ...

  5. KVO 模式详解

    KVO:观察者模式.当指定的被观察对象属性被修改时,允许对象接收到通知的机制. p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px Menlo; ...

  6. IOS 私有变量 私有属性的书写方法

    一.早期只能定义在.h文件中.用@private 关键字来定义私有变量. @interface ViewController{ @private Bool _isBool; } @end 二.允许在. ...

  7. Extjs6（特别篇）——项目自带例子main.js拆分详解

    本文基于extjs6.0.0 一.拆分代码来看看 1.主页面main是个tab页: 写一些页面的依赖: 标明页面的controller和viewModel Ext.define('Learning.v ...

  8. JS+html--实现图片轮播

    大家肯定见过某些网站一个炫酷的页面,就是图片轮播,也就是我们常说的幻灯片播放.对于初学者来说,可能会有点头疼,没关系,小李在这给大家献上自己刚刚写好的关于图片轮播的代码. 以下功能的实现用了jQuer ...

  9. java线程控制安全

    synchronized() 在线程运行的时候,有时会出现线程安全问题例如:买票程序,有可能会出现不同窗口买同一张编号的票 运行如下代码: public class runable implement ...

  10. selenium操作拖拽实现无效果的替代方案

    如果碰到这种情况,无论你是直接通过draganddrop()还是分步执行clickandhold(),dragtoelement(),或通过by_offset位移都无法实现元素拖拽.只能物理模拟了 w ...