一、CSS常用选择器
/*CSS注释*/
/*CSS修改页面中的所有标签必须借助选择器选中。
选择器中可以写多对CSS属性:每个属性名与属性值之间用:分隔，多对属性之间，必须用;分隔
选择器{
属性1:属性值;
属性2:属性值; 必须用英文英文！！！！！
}
页面中，所有的css代码，需要写到<style></style>标签中，style标签的type属性应该选择text/css，但是type属性可以省略
【css常用选择器】
1.标签选择器 1
写法：HTML标签名{
作用：可以选中页面中所有与选择器同名的HTML标签。
}
2.类选择器 10
写法：.class名{}
调用：在需要的调用选择器样式的标签上，使用class="class名"调用选择器。
class的优先级大于标签选择器
如果需要连个类名用空格分隔
3.ID选择器 100
写法：#ID名{}
调用：需要调用样式的标签，起一个id="id名"
同时存在时优先级ID选择器大于class选择器
id选择器整个页面中不能出现同名ID
class选择器与id选择器区别
①写法不同，前者用 . 后者用 #
②优先级不同
③作用范围不同，class可以选择多个，而id选择器只能使用一次。
【选择器的命名规范】
只能由字母数字下划线减号组成
开头不能是数字，也不能是只有一个减号
一般起名要求有语义使用英语单词与数字的组合
4.通用选择器
*{}
* 作用：可以选中页面中的所有标签，但是优先级最低
5.并集选择器
写法：选择器1.选择器2，，选择器n{}
左右：多个选择器取并集，只要标签满足其中任意一个选择器，样式即刻生效。
6.交集选择器
写法：两个选择器之间没有任何东西
作用：多个选择器取交集，到必须满足所有选择器的要求才能生效。
7.后代选择器和子代选择器
后代选择器
写法：div span{}
只要满足前一个选择器是后一个的后代，即刻生效
子代选择器
写法：div>span
必须满足后一个选择器是后一个选择器的直系子代，才能生效，中间不能有任何标签。
8.伪类选择器
写法：在选择器后面用冒号分隔紧接伪类状态
eg：.a:link{}
超链接的伪类状态：
：link未访问状态
：visited已访问状态
：hover 鼠标指上状态（最常用）
：active激活选定状态
当超链接多种伪类状态同时存在时，必须按照link、visited、hover、active顺序
input的伪类状态：
：hover ：focus 获得焦点状态：active
注意input的多种状态同时存在，必须按照上面的顺序。
其他标签必须按照上面的顺序。
【优先级权重问题】
1.CSS生效的第一原则是，近者优先。那个选择器作用于最里层标签，则这个选择起生效。
2.当选择其作用于同一层时。可以根据优先级权重，进行累加计算，
id选择器100
class选择器10
标签选择器1
并集选择器相当于多个选择器拆开写，所以并集选择器的优先级不能累加
3.当选择器作用于同一层且优先级权重相等时，则写在最后的选择器生效（离代码近）。
【引入CSS的三种方式】
1.行内样式表：直接在HTML标签中，使用style的方式引用；
<div style="height:100px"></div>
优点，使用灵活，优先级权重最高。
缺点：不符合w3c关于内容跟表现分离的要求；不利于样式复用。
2.内部样式表：在<head></head>标签中，使用<style></style>标签包裹CSS代码
特点：一定程度的实现了HTML与css的分离，但是分离不够彻底，没有办法多页面公用样式。
3.外部样式表：将css单独写入CSS文件中，并于html文件关联。
优点能够实现HTML与css的分离，符合w3c规范，有利于多页面重复使用统一样式
。
【引用css样式表】：
rel：选择stylesheet
type：选择text/css，可以省略
href：表示链接的css文件路径
导入css文件的两种方式，
①在<head></head>标签中使用link标签
②在style标签中使用@import导入
两种导入方式的区别（面试的时候容易问）
①link属于标准的HTML标签，而@import不是标准标签
②link可以兼容所有低版本浏览器，而后者则不行
③link是将连个文件连接起来起桥梁作用，而@import相当于将css文件复制到HTML文件中。
④linkhuizaihtml文件边加载的过程中边链接css文件而@import会在html文件全部加载完以后在导入css文件。
综上所述，我们使用link连接的方式加载css文件。
【css中颜色表示方式】
①直接使用颜色单词表示：red、blue
②使用颜色的16进制数表示：#ffffff 前两位俩俩一组（最常用的）
③用RGB表示rgb（255.0.0）三位数分别表示红绿蓝的对比。rgba第四位数表示透明度。
【css常用文本属性】
1.字体、字号类：
①font-weight：字体粗细 bold（加粗） normal（正常） ligher（细体）
也可以使用100-400数值，400表示normal；700是bold
②font-style：字体样式，italic-倾斜，normal-正常 200%表示 浏览器默认大小的的两倍
③font-family：字体系列；可以直接写字体名，也可以写字体系列名
常用字体系列：serif——衬线体 sans-serif——非衬线体fontfamil可以接受多个值，用“,”分隔表示优先使用第一个，如果没有这个字体一次向后使用，通常最后一个值放字体系列值
font缩写形式：
①顺序必须是：font-weight font-style font-size/line-height font-family
font——size/line-height必须一组，用/分隔font-family多个字体之间，用逗号分隔
2.字体颜色
①color：可以是单词、16进制、rbg等
②opacity：透明度，可选值0-1
opacity和rgba得到区别
rgba本身可以设置颜色，而opacity必须配合其他颜色属性来用
rgba仅仅是让当前颜色设置的透明，而opacity会让当前元素里面的所选文字背景，子元素都透明
3.行距对齐类
①line-height：可以写像素单、百分比、数字（表示默认行距的几倍）
行高重要作用，单行文字子在div中垂直居中，设置行高=div的高度即可让行文字垂直居中
②text-align：设置区域内的行级元素水平对齐方式：left、center、right
③letter-space：字符间距，字符与字符之间的距离。
④text-decoration：文本修饰 underline下划线、overline-上划线、 line-though删除线、none去掉超链接的下划线
⑤over-follow：设置超出区域的文字显示方式
overfollow：hidden ：超出区域的文字隐藏不显示。
overfollow：scroll：无论多少文字，都会显示水平垂直滚动条
***overfollow：auto；文字多显示滚动条，文字少不显示滚动条***
可以使用 overfollow-x：scroll；overfollow-y；hidden单独修改两个方向的滚动条
⑥text-overflow：设置行末多余文字的显示方式
clip：多余文字裁剪掉
ellipsis：显示省略号，需要配合white-space：nowrap使用
white-space：nowrap;设置中文行末，不断行显示。
*******重点：设置行末显示省略号的*********
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap
这三个条件缺一不可
⑦webkit-text-stroke：0.5px blue：文字描边。
webkit表示只有webkit内核浏览器 才生效：苹果和谷歌
⑧text-shadow: 2px 2px 2px blue 文字阴影有四个属性值，空格分隔
水平阴影距离，正数表示右移，负数左移，第二个数垂直阴影距离，正数上移，负数下移，第三个数值，阴影模糊距离，0表示一点不模糊。
⑨text-indent：首行缩进
- web前端学习（三）css学习笔记部分（1）-- css入门基础知识+基本样式
1.介绍及语法 1.1CSS概述: CSS指层叠样式表 CSS样式表极大地提高了工作效率 如果值大于一个单词,需要加上引号(意思是值只有一个的时候可以不加引号) 1.2CSS高级语法 1.选择器分组 ...
- React Native 入门基础知识总结
中秋在家闲得无事,想着做点啥,后来想想,为啥不学学 react native.在学习 React Native 时, 需要对前端(HTML,CSS,JavaScript)知识有所了解.对于JS,可以看 ...
- HTML+CSS+JS基础知识
HTML+CSS+JS基础知识 目录 对HTML+CSS+JS的理解 基础知识 对HTML+CSS+JS的理解 基础知识 插入样式表的三种方式 外部样式表:<link rel="sty ...
- CSS样式基础知识
CSS样式基础知识 CSS样式概述 CSS是Cascading Style Sheet 的缩写.译作“层叠样式表单”.是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言. 引用位 ...
- 第六十九节，css入门基础
css入门基础 学习要点: 1.使用CSS 2.三种方式 3.层叠和继承 本章主要探讨HTML5中CSS (层叠样式表),它是用来对HTML文档外观的表现形式进行排版和格式化. 一 使用CSS CSS ...
- USB入门基础知识（转）
源:USB入门基础知识 相关名词: 主机(Host) 设备(Device) 接口(Interface) 管道(Pipe) 管道是主机与设备端点数据传输的连接通道,代表了主机的数据缓冲区与设备端点之间交 ...
- 【CSS入门基础，有需要的看过来哦】心境，心静，不轻言放弃！---致CSS
整理一下近一周学习的有关CSS的基础知识笔记: CSS语法必须写在<style>标签中哦~/*注释*/ [CSS常用背景属性]background background-color:背景色 ...
- Linux入门基础知识
注:内容系兄弟连Linux教程(百度传课:史上最牛的Linux视频教程)的学习笔记. Linux入门基础知识 1. Unix和Linux发展历史 二者就像父子关系,当然Unix是老爹.1965年,MI ...
- Greenplum入门——基础知识、安装、常用函数
Greenplum入门——基础知识.安装.常用函数 2017年10月08日 22:03:09 在咖啡里溺水的鱼 阅读数:8709 版权声明:本文为博主原创,允许非商业性质转载但请注明原作者和出处 ...
随机推荐
- Kafka 存储机制和副本
1.概述 Kafka 快速稳定的发展,得到越来越多开发者和使用者的青睐.它的流行得益于它底层的设计和操作简单,存储系统高效,以及充分利用磁盘顺序读写等特性,和其实时在线的业务场景.对于Kafka来说, ...
- Cordova + idea 环境搭建
1.安装前期工作 1).安装Node.js http://nodejs.cn/download/ 里面内置了npm,可以用来安装 Cordova,把该路径添加到环境变量,这样就可以在 cmd 里面任何 ...
- Selenium 新窗口处理方法
有时点击一个链接,跳到一个新的窗口,这时WebDriver需切换到新窗口,才能对新窗口的元素进行操作 这里封装一个switchToWindow方法: public boolean switchToWi ...
- React Native 系列(九) -- Tab标签组件
前言 本系列是基于React Native版本号0.44.3写的.很多的App都使用了Tab标签组件,例如QQ,微信等等,就是切换不同的选项,显示不同的内容.那么这篇文章将介绍RN中的Tab标签组件. ...
- get,post,jsonp数据交互—百度下拉列表
三种数据交互形式:get post jsonp 一.get请求 1.引入 vue.js 和 vue-resource.js , 准备一个按钮 <input type="button& ...
- Fiddler模拟重发请求
在测试的过程中会碰到模拟请求的重发或者修改请求的参数进行请求模拟发送 一.Reissue Sequentially 模拟多次重发 1.启用后fiddler:PC端或手机端创建某条数据后,session ...
- 利用Arduino快速制作Teensy BadUSB， 攻击计算机
BadUsb介绍 BadUSB是计算机安全领域的热门话题之一,该漏洞由Karsten Nohl和Jakob Lell共同发现,并在2014年的BlackHat安全大会上公布. 虽然已隔一两年,但还是有 ...
- python_cookie
cookielib是一个自动处理cookies的模块 ## 核心类 CookieJar:是cookie的集合,可以包含很多Cookie类,是我们的主要操作对象 FileCookieJar:继承自Coo ...
- 使用可以为 null 的类型
??运算符 ?? 运算符定义在将可以为 null 的类型分配给非可以为 null 的类型时返回的默认值. C# int? c = null; // d = c, unless c is null, ...
- [js高手之路]原型对象(prototype)与原型链相关属性与方法详解
一,instanceof: instanceof检测左侧的__proto__原型链上,是否存在右侧的prototype原型. 我在之前的两篇文章 [js高手之路]构造函数的基本特性与优缺点 [js高手 ...
