css初学习
一 、css基础知识
- 网页的三种表现形式:视图层(html层)、表现层(css层)、行为层(js)。 视图层:决定网页的结构及内容,即“显示哪些内容”。表现层:设计网页的表现样式,即“如何显示有关内容”。行为层:控制网页的行为(效果),即“内容应该如何对事件做出反应”
- 表现层:css,全名叫层叠样式表。
- css的作用:对html元素的位置和精确计算像素,外观,字体等等
- css的特点:(1)丰富的样式定义(2)易于使用和修改(3)多页面使用(4)可层叠,即一个元素可具有多个css样式(5)页面压缩,尽量多次重复用同样的css,减小css文件体积,提高网页性能
- css样式属性写法: 属性:值;
- css几种使用方式(元素设置宽高的时候 块级元素可设, 行级元素不可):
(1)行内样式:在元素标签上的style属性上直接写css, 在浏览器上查看位置在
element.style {
background: red;
}
(2)内嵌样式:在网页里面任意位置(head/body标签之内去写 <style type="text/css"> </style>
其中type=“text/css”` 可以省略不写。 内嵌样式的写法: ele{ }
编译之后格式:
* { 当前页面多少行代码
border: 1px solid red;
}
(3)外部样式表 :css写在外部的css文件里面,网页直接调用使用。样式分为:单属性/复合属性样式。如下:
A.background复合属性:background: red url(’./image/0.jpg’) no-repeat 0 0; (复合上面不写size)
*background-color: #f9fdff;
background-image:url('./image/0.jpg');
background-size: cover;
background-repeat: no-repeat;
background-position:50px;
background-position-x: 50px;
background-position-y: 50px;*
B.border边框复合样式:border:1px solid red;
border-left:1px solid red;
border-left-width: 10px;
border-left-style: dashed;
border-left-color: blue;
以此类推:
border-top:1px solid blue;
border-bottom: 1px solid orange;
border-right: 1px solid pink;
C. 字体样式:
font-size: 14px; 浏览器默认字体是14px, 这个用css默认的值
font-family: serif; 设置字体的 ,css默认的有几个字体,也可以子集自定义字体。需要自己导入字体文件:@font-face
二、选择器
- 内嵌样式里面的css选择器( css中注释 用ctrl+shift+/):
(1)*匹配器 匹配当前网页里面的所有元素
(2)元素匹配器 根据当前元素的名称来匹配
(3) class类名称匹配器 根据元素的class属性名称来匹配 用点来匹配 元素种的一部分 (一个元素可能同时具有多个类)
<button class="btn btnsub">按钮</button>
<button>按钮</button>
<button class="btn">按钮</button>
<div class="btn">
我是div
</div>
- id名称匹配:根据当前元素的id属性来匹配(一个元素一个 不重名)使用#来选择
#userID{
width: 200px;
height: 30px;
}(id可以重复,建议不这写)
9.组合选择器:
(1)子父关系选择器是空格选择
ul li{
color: red;
}
备注:空格选择器 指匹配当前元素里面的所有后代元素
(2)>选择
#menu>li{
border: 1px solid red;
}
备注:>选择器指匹配当前元素里面的直接子元素,写的时候也可以根据元素区分class和id
button.navinfo{
border: 1px solid blue;
color: red;
}
ul#menu{
}
(3)相邻元素选择器 +(匹配当前元素之后紧跟的元素)
.p1+p{
color: red;
}``
(4)~(匹配当前元素之后的所有元素) 指的是同级元素匹配
.p1~p{
color: red;
}
10.子集选择器(css2里面的伪类选择器):里面的数字是按照序号数
.box>p:nth-child(1){
}
下面这两个选择器直接找的是子集里面的第一个或者最后一个
.box>p:first-child{
color: red;
}(第一个)
.box>p:last-child{
color: red;
}(最后一个)
上面这三个伪类选择器 可以直接写元素匹配
p:first-child{
color: red;
}
p:last-child{
color: red;
}
p:nth-child(3){
color: red;
}
11.属性选择器:根据元素的属性去匹配元素的。写法: 匹配器[属性]{}
button[type]{
color: red;
}
(1)多个属性匹配
button[type][class]{
color: red;
}
(2)根据属性值来匹配
button[class=info][type=button]{
color: red;
}
(3) 根据属性值来匹配 值是以谁开头 或者 以谁结尾 包含那个字母
button[class^=a]{
color: red;
}
button[class$=m]{
color: red;
}
button[class*=f]{
color: red;
}
(4)???遗漏的选择器 分组选择器
button,p,span{
color: red;
}
/* .btn,#id,button{
}*/
div>#menu,ul>li.info{
}
-
外部样式使用:在外部建立css文件,引入到网页里面,引入位置在heade或者body里面都可以,外部样式的写法和内嵌样式的写法一致(都是选择器)
引入方式:
rel=“stylesheet” type=“text/css” 可以省略不写
<link rel="stylesheet" href="./css/index.css" type="text/css"/>
三、优先级
13.css三大样式之间的优先级:若三大样式之间如果存在冲突则为行内样式>内嵌样式>外部样式(行内样式>外部样式>内嵌样式),这与加载css的顺序就有关若三大样式之间 如果样式不冲突 则叠加
14.选择器之间的优先级(内嵌与外部样式存在): 四个基本选择器之间的优先级 : d>class>ele>*
15.组合选择器里面的优先级:同匹配方案 牵扯到父级(父级的优先级高)
16.提高样式优先级:!important 提高的比行内样式优先级还高
四、盒子模型
17.css里面的盒子模型:用来设计和布局的时候使用,包括边距、边框、填充、实际内容一个简单的元素就可以构成盒子模型
浏览器给网页body元素默认一个margin外间距值 8px
一般加入:
*{
margin: 0;
padding: 0;
}
外间距属性:
margin-left: 50px;
margin-top: 50px;
margin-right: 50px;
margin-bottom: 50px;
margin: 0 10px 20px 30px;
margin: 0px 10px 20px;
margin: 0px 10px;
margin:0;
内监局属性:
padding-left: 20px;
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding: 0 10px 20px 30px;
padding: 0px 10px 20px;
padding: 0px 10px;
padding:0;
css样式属性值里面inherit(当前元素的这个属性值继承父元素的这个属性值)
.box>span{
display: inherit;
}
18.css里面块级元素和行级元素相互转化的问题:使用的使用是 display:block;(转化块级)display:inline-block;(转化行级快) display:inline;(转化行级)。需要注意的是: 两个盒子上下放置,设置外间距; 两个容器间的间距不会叠加,而是取两个里面间距的最大值; 两个行级快之间的外间距会叠加
19.BFC:是指元素相对独立,自身的结构和位置不会影响周边元素。只要元素满足下面任一条件即可触发 BFC 特性:
A. body 根元素
B.浮动元素:float 除 none 以外的值
C.绝对定位元素:position (absolute、fixed)
D.display 为 inline-block、table-cells、flex
E.overflow 除了 visible 以外的值 (hidden、auto、scroll)
- 普通流的BFC: 块元素上下结构如果属域同一个BFC,这两个元素之间的外间距会重叠 ,如果将另一个元素用其他元素包裹设置父元素样式 overflow: hidden; 会构建为另一个BFC,这样的两个上下元素之间的间距会叠加 不会重叠
五、伪类
21.css里面的伪类:
:hover 悬停伪类
:active 激活伪类
:checked 选择伪类 主要使用 radio checkbox
:focus 获得焦点伪类 input表单元素
:after 给元素的内容之后追加内容
:before 给元素的内容之前追加内容
下面这两是可用和不可用的伪类(表单元素添加disabled 为不可用 不添加可用)
input:disabled{
color: blue;
}
input:enabled{
color: green;
}
.fontbox:after{
content: "";
}
.fontbox:before{
content: "";
}
六、其他
22.css里面的尺寸:width height max-width min-width max-height min-height line-height。
line-height: 100px;
属性设置一行的高度
23…css里面的文本对齐方式:text-align: inherit; left center right inherit
24.css里面的像素单位:
(1) px(固定单位像素) rem em %(百分比 相对父容器走百分比)
(2)rem 相对根节点 如果给html设置字体大小16px 1rem =16px;
(3) em 相对像素 如果父元素没有设置字体大小,相对浏览器走默认像素 ; 如果父容器设置字体大小, 相对父容的字体大小
25.input表单元素的轮廓
input {
outline: none;
/*outline-color: red;
outline-width: 2px;
outline-style: dashed;
outline-offset: 10px;*/
}