选择器
css选择器有五种
选择器是一种选择方式，选中想要的元素的方式，叫选择器，有很多选择器，但是目的都一样
元素选择器，ID选择器，Class选择器，后代选择器，群组选择器
元素选择器
div{width:100px; height:100px} 宽100，高100
id选择器
我们可以为元素设置一个ID属性，然后选择器调用这个设置的ID
#box{width:100px; height:100px} ID选择器前面要加#
class选择器
也就是类选择器，对象同或者不同的元素定义相同的类属性，然后一起操作
.box{width:100px;height:100px} 类选择器前面要加.(点)
后代选择器
选择所有元素内部中的某一种元素
h3,div{width:100px;height:100px} 选择div里的h3
群组选择器
同时操作许多元素
div,p,span{width:100px;height:100px;}
字体样式简介
font-family :字体1 字体类型
font-size : 100px 字体大小
font-weight : 100px 字体粗细
font-style : (normal正常，italic斜体,oblique斜体)字体风格
color :red 或者像素值 字体颜色
文本样式简介
text-indent:像素值；文本首行缩进
text-align:取值 (left,center,right)水平对齐
text-decoration:取值; (none,去除所有划线效果，under line,下划线,line-through,中划线,overline,上划线)
border-bottom;none(去除下面的线，其他方向同理)
dashed 虚线
text-transform:取值; (none,无转换,uppercase,转换为大写,lowercase,转换为小写,capitalize,只讲单词首字母转换为大写)
line-height:像素值; 行高
letter-spacing:100px 调整字之间的距离
word-spacing:100px 调整单词之间的距离(英文)
整体样式
border-width: 10px 边框的宽度
border-style : solid 边框的外观
border-color : red 边框颜色
可以简写
border:10px solid red;
列表项符号
list-style-type:None; 去除列表项符号
list-style-immage:url(图片路径); 在列表前面添加图片
表格样式
caption-side 表格标题位置
border-collapse 表格边框合并
border-spacing 表格边框间距
图片样式
掌握图片属性(大小，边框，对齐)
width:像素;
height:像素;
border:1px solid red; 边框，1像素，正常风格，红色
text-align:取值; (left左对齐,center居中,right右对齐) 水平对齐方式
vertical-align:取值;(top顶部对齐,middle中部对齐,baseline基线对齐,bottom底部对齐) 这是垂直对齐方式
float:取值; (left,元素向左浮动，right元素向右浮动) 文字环绕图片的效果
移动图片
style="position:relative;top:100px;"> 这就是移动图片，反向的
背景样式
background-color定义背景颜色
background-image:url(图片路径) 定义背景图片地址
background-repeat定义背景图片重复
repeat 两个方向同时平铺 repeat-x只在水平方向平铺 repeat-y只在垂直方向平铺 no-repeat0不平铺
background-position:像素值/关键字 (10px 20px)或者ba(center)定义背景图片位置
background-attachment:取值 scroll根元素一起滚 fixed固定不动 定义背景图片固定
超链接 伪类选择器
a:link{} 定义a未访问时的样式
a:visited{} 定义a访问后的样式 (也可能是默认？？？)
超链接去除下划线
a:hover 定义鼠标经过a元素时的样式
a:active 定义鼠标点击激活时的样式
a:before{content:"."}可以在前面插入一个点
浏览器鼠标样式
cursor:取值; (default,pointer,text，这是三个不同的鼠标样式) 用来定义鼠标样式
盒子模型
padding:10px; 设置内边距为10px
一个值 上下左右都是
两个值 上下 左右
三个值 上 左右 下
四个值 顺时针 上 右 下 左
margin:10px; 设置外边距为10px 左右auto自适应
几个值的时候跟内边距一样
display
固定定位
position:fixed; 可以一直在原来的地方 不管下拉还是怎么，都保持在原地
left:10px; top:10px; 相对于浏览器四个边框而言
绝对定位
position:absolute; 跟固定定位一样，只是可以随着用户操作滚出屏幕
相对定位
position:relative: 相对原来的自己而言，
left:10px top:10px 像右10px 下10px
css元素溢出
当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的子元素的方式，设置的方法是通过overflow属性来设置。
overflow的设置项：
1、visible 默认值。内容不会被修剪，会呈现在元素框之外。
2、hidden 内容会被修剪，并且其余内容是不可见的，此属性还有清除浮动、清除margin-top塌陷的功能。
3、scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
4、auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
5、inherit 规定应该从父元素继承 overflow 属性的值
行内块元素
把行元素变成块元素
display:inlin-block; 变完之后就能设置宽高了
display属性
display属性是用来设置元素的类型及隐藏的，常用的属性有：
1、none 元素隐藏且不占位置
2、block 元素以块元素显示
3、inline 元素以内联元素显示
4、inline-block 元素以内联块元素显示
js全称javaScript，是运行在浏览器端的脚本语言
页面嵌入
类似css,声明这嵌入的是个js类型的文件
var a = '你好!'; 设置变量,var是设置变量的声明函数 a就是那个变量
alert(a); alert是一个弹窗，类似python里的print
收尾
外部引入
从外部引入
变量
区分大小写
第一个字符必须是字母，下划线(_),或者美元符号$
5种基本数据类型:
number(数字类型),string(字符串类型),boolean(布尔类型)
undefined(找不到),null(空值),object(复合类型)
用js来设置id属性或者其他属性的元素
声明嵌入
var q1 = document.getElementById('div1'); q1是变量 后面是吧ID为div1的html对象赋值给q1
用js操作属性
font-size变成style.fontSize 变成驼峰写法
innerHTML
它可以读取或者写入标签包裹的内容
var div2 = documen.getElementById('div1') 把ID 为div1赋值给名为div2的变量
var txt = div2.innerHTML; 读取div2里的所有写入标签的内容
定义函数
function aa() 定义一个函数 function用来定义函数 函数名字叫aa
{alert('hello!')}; 函数内容为弹出弹框为hello
aa(); 调用函数，这个函数可以写在定义函数上面
也可以输入参数，来达到输出的内容
匿名函数
var q1 = document.getElementById('btn1')
q1.onclick = function(){alert("OK!")} 设置好变量，提取完属性之后直接调用函数。
网友评论