css和js和jQuery和ajax

目录

css

css注释 /**/        

css 一般结构

css得到具体标签

id选择器 #id名    id只能一个

class选择器 .class名 

也可以直接写标签名称

标签名称配合.  

插入样式表 

外部样式表

内部样式表

内联样式

 background

  background(简写背景图片设置)

background-color

background-image:url("");

background-repeat:repeat-x;  (重复图片?)

background-attachment:        (滚动背景图片?)

background-position (设置背景图片位置)

text文本 

文本颜色color(文本颜色为color,没有font-color)         

text-align: 位置

 text-decoration:overline; (文本修饰,下划线那一套)

text-transform: (文本转换,转换成大写,小写,或者头字母大写)

text-indent:50px;(文本缩进的距离)

两个字符之间空间、行与行之间空间

文本方向、单词之间间隔位置

文本与图像的位置(文本与图像在一行时是在图片上方还是下面还是中间)

为文本增加阴影

字体font

font将下列全部表述

font-family字体系列

font-sytle字体斜体、正常、倾斜

font-size字体大小(px像素、em)

font-weight 字体粗细

a:link - 正常,未访问过的链接

a:visited - 用户已访问过的链接

a:hover - 当用户鼠标放在链接上时

a:active - 链接被点击的那一刻

css列表(有序ol、无序ul)

表格

表格边框border (这个属性只弄边框,弄背景颜色需要background-color)

border-collapse:collapse(将双框变为单框)

表格宽度width,高度height

 **盒子模型**

三个“距离” margin、border、padding

 border-style设置边框样式

border-width 边框宽度

border-color边框颜色

※※※单独设置某个边框的样式

outline轮廓(第一个区域) 

 margin外边距(第二个距离)

 padding填充(第三个距离)

display显示和visibility

块元素(单独占一行,宽度内没有其他元素,前后都是换行符)

内联元素(只需要必要的宽度,不强制换行)

块元素变为内联元素 display:inline;

内联元素变为块元素display:block;

 position定位

static默认元素

fixed固定定位(不会随着窗口的移动而移动,不占据空间)

relative定位(相对于正常位置进行移动,占据空间)

absoulte 绝对定位 (相对于最近的父对象,是不同图层--不占据空间)

sticky粘性定位(占据空间)

z-index:-1;(指明图层)

 cursor(光标的样式)

overflow 属性(指明元素的内容超过给定的宽度后是否设置滚动条)

 float浮动(脱离文档流)


css

css注释 /**/        

css 一般结构

<style>

p { color:red; text-align:center; }

</style>

css得到具体标签

id选择器 #id名    id只能一个

<style>
#para1
{
    text-align:center;
    color:red;
}
</style>

class选择器 .class名 

<style>
.center {text-align:center;}
</style>

也可以直接写标签名称

如p{}    body{} 

标签名称配合.  

p.center{}

插入样式表 

外部样式表

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
mystyle.css里面的内容

hr {color:sienna;}
p {margin-left:20px;}

 link表示链接,stylesheet意思是样式表 text/css表示css文本 

内部样式表

即一般结构,在<style> </style>里面获取标签,对标签内容进行定义

内联样式

<p style="color:sienna;margin-left:20px">这是一个段落。</p>

在标签里面定义style, 这个style和在头里面定义的是一个,同样都是用:表示要表示的内容

(内联样式)Inline style > (内部样式)Internal style sheet >(外部样式)External style sheet > 浏览器默认样式

 background

  background(简写背景图片设置)

 将背景图片的颜色,图片url,滚动与否,重复与否,位置都写出来

body
{ 
    background: #00ff00 url('smiley.gif') no-repeat fixed center; 
}

background-color

background-color:#b0c4de;设置背景颜色

background-image:url("");

设置背景图片

background-repeat:repeat-x;  (重复图片?)

不让背景图片覆盖整个页面(不设置默认有多个图片覆盖整个页面,设置了整个页面就只有一张)

background-attachment:        (滚动背景图片?)

一般就是scroll和fixed,背景图片是否会随着页面的滚动而滚动

scroll背景图片随着页面的滚动而滚动,这是默认的。
fixed背景图片不会随着页面的滚动而滚动。
local背景图片会随着元素内容的滚动而滚动。
initial设置该属性的默认值。 阅读关于 initial 内容
inherit指定 background-attachment 的设置应该从父元素继承。 阅读关于 inherit 内容

background-position (设置背景图片位置)

left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom
如果仅指定一个关键字,其他值将会是"center"
x% y%第一个值是水平位置,第二个值是垂直。左上角是0%0%。右下角是100%100%。如果仅指定了一个值,其他值将是50%。 。默认值为:0%0%           百分表示位置
xpos ypos第一个值是水平位置,第二个值是垂直。左上角是0。单位可以是像素(0px0px)或任何其他 CSS单位。如果仅指定了一个值,其他值将是50%。你可以混合使用%和positions 像素位置
inherit指定background-position属性设置应该从父元素继承

text文本 

文本颜色color(文本颜色为color,没有font-color)         

body {color:red;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}

text-align: 位置

 文本排列方式,center,right,justify(自动)文本排列将改变

 text-align运用在块级元素中,使其中的文本对齐

也就是说如果在一个div里面加上text-align:center将会使的其内部所有元素都会居中显示,不过里面有多少div。这里如果包含的某个div没有设置宽度和长度,将会居中显示这个div,因为由于div是由文本撑开的,所以文本有多少,那么div就有多大

 text-decoration:overline; (文本修饰,下划线那一套)

h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}

text-transform: (文本转换,转换成大写,小写,或者头字母大写)

p{text-transform:uppercase;}全部大写
p{text-transform:lowercase;}全部小写
p{text-transform:capitalize;}全部单词的首字母大写

text-indent:50px;(文本缩进的距离)

p {text-indent:50px;}

两个字符之间空间、行与行之间空间

文本方向、单词之间间隔位置

文本与图像的位置(文本与图像在一行时是在图片上方还是下面还是中间)

为文本增加阴影

字体font

font将下列全部表述

font-family字体系列

p{font-family:"Times New Roman", Times, serif;}

font-sytle字体斜体、正常、倾斜

p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}

font-size字体大小(px像素、em)

font-weight 字体粗细

normal默认值。定义标准的字符。
bold定义粗体字符。
bolder定义更粗的字符。
lighter定义更细的字符。
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900
定义由细到粗的字符。400 等同于 normal,而 700 等同于 bold。
inherit规定应该从父元素继承字体的粗细。

对链接事件设置

  • a:link - 正常,未访问过的链接

  • a:visited - 用户已访问过的链接

  • a:hover - 当用户鼠标放在链接上时

  • a:active - 链接被点击的那一刻

下划线
a:link {text-decoration:none;} 

a:visited {text-decoration:none;} 

a:hover {text-decoration:underline;} 

a:active {text-decoration:underline;}
对背景颜色 

a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}

css列表(有序ol、无序ul)

表格

表格边框border (这个属性只弄边框,弄背景颜色需要background-color)

                                                            

这里是双框,因为每个独立的边界

border-collapse:collapse(将双框变为单框)

表格宽度width,高度height

 **盒子模型**

三个“距离” margin、border、padding

CSS box-model

 Margin(外边距) - 边框外的区域,外边距是透明的(无法设置颜色)
Border(边框) - 围绕在内边距和内容外的边框(可以设置颜色)。
Padding(内边距) - 内容周围的区域,内边距是透明的(注意这个)
Content(内容) - 盒子的内容,显示文本和图像。

 

也就是距离核心部分有三个“距离”

 border-style设置边框样式

 

border-width 边框宽度

border-color边框颜色

※※※单独设置某个边框的样式

    border-top-style:dotted;
    border-right-style:solid;
    border-bottom-style:dotted;
    border-left-style:solid;

 比如设置某个边框的粗细等

outline轮廓(第一个区域) 

Outline

 margin外边距(第二个距离)

 外边距是完全透明的,无法设置颜色,一般的颜色是border的颜色,而非margin的颜色

margin简写属性。在一个声明中设置所有外边距属性。
margin-bottom设置元素的下外边距。
margin-left设置元素的左外边距。
margin-right设置元素的右外边距。
margin-top设置元素的上外边距。

 padding填充(第三个距离)

padding使用简写属性设置在一个声明中的所有填充属性
padding-bottom设置元素的底部填充
padding-left设置元素的左部填充
padding-right设置元素的右部填充
padding-top设置元素的顶部填充

       如果padding距离被清除,那么所在背景即核心的内容

display显示和visibility

display:none 元素将彻底消失

visibility:hidden元素不可见,但还在上面

块元素(单独占一行,宽度内没有其他元素,前后都是换行符)

内联元素(只需要必要的宽度,不强制换行)

块元素变为内联元素 display:inline;

内联元素变为块元素display:block;

 position定位

static默认元素

遵循正常的文档流对象

fixed固定定位(不会随着窗口的移动而移动,不占据空间)

fixed与文档流无关,因此不占据空间,而且可能会与其他元素重叠

需要指定在屏幕的位置,不指定默认在左上角

relative定位(相对于正常位置进行移动,占据空间)

h2.pos_left
{
    position:relative;
    left:-20px;
}

相对于正常位置往左移动20像素

这个是正常的文档流

 

 

 可以看出移动的效果,但是他的空间仍是保留的

absoulte 绝对定位 (相对于最近的父对象,是不同图层--不占据空间)

相对于最近的父对象绝对定位,如果没有指明,那么html就是他的父对象

sticky粘性定位(占据空间)

 往下滚动后,滚动到最下面,可以发现他是不动的

z-index:-1;(指明图层)

img
{
    position:absolute;
    left:0px;
    top:0px;
    z-index:-1;
}

 cursor(光标的样式)

指明移到使用这个属性后光标的样式

url可以自己指定

overflow 属性(指明元素的内容超过给定的宽度后是否设置滚动条)

visible    默认值。内容不会被修剪,会呈现在元素框之外。
hidden    内容会被修剪,并且其余内容是不可见的。
scroll    内容会被修剪,但是浏览器会显示滚动条  以便查看其余的内容。
auto    如果内容被修剪,则浏览器会显示滚动条    以便查看其余的内容。
inherit    规定应该从父元素继承 overflow 属性的值。

默认值

overflow-x指明左右边缘超出后的处理行为

overflow-y 指明顶/底部溢出后的处理行为

 float浮动(脱离文档流)

对于文字没有效果

没有浮动

 加了float:right;后

 用clear不让左右有其他的浮动元素

posted @ 2022-05-15 21:49  贪睡地蜗牛  阅读(46)  评论(0编辑  收藏  举报