1,div与span标签

移动端选中的背景色改变jquery_1024程序员节

2.css基础语法

移动端选中的背景色改变jquery_背景图片_02

1.格式:选择器{属性1;值1;属性2;值2}
2长度单位:px→像素(pixel)、%→百分比
eg:
外容器1:→600px 当前容器50%→300px
外容器2→400px 当前容器50%→200px
3.基本样式:width 宽、height高、background-color背景颜色
4.css注释:跟html没有区别/* 知识的内容*/

3、内联样式与内部样式

移动端选中的背景色改变jquery_选择器_03

css样式的映入方式
1.内联(行内、行间)样式
在html标签上添加style属性来实现的
2.内部样式
在*<style*标签内添加的样式
区别:内部样式的代码可以服用,符合w3c的规范标准,尽量让结构和代码分开处理。

4、外部样式:

引入一个单独的css文件,name,css

通过< ink>标签引入外部资源 rel属性指定资源跟页面的关系,href属性资源的地址

移动端选中的背景色改变jquery_背景图片_04

5.css中的颜色表示法

1.单词表示法:red、blue green yellow等等
2.十六进制表示法:0 1 2 3 4 5 6 7 8 9 a b c d e f
3.rgb(红绿蓝)三原色表示法:rgb(三色的取值范围)
取值范围:0~255
4.使用提取颜色的下载地址或者使用photoshop工具.

6.css中的背景样式.

移动端选中的背景色改变jquery_选择器_05

1.background-color:背景颜色
2.background-image:背景图片

ur1(背景地址) 默认:会水平垂直都铺满背景图

3.background-repeat:背景图片的平铺方式

repeat-x
repeat-y
repeat(x,y都进行平铺,默认值)
no-repeat(都不平铺)

4.background-position:背景图片的位置

用法:x y :number (px或%都可以)
或x:left,center,right
y:top,center,bottom

5.background-attachment:背景图随滚动条的移动方式

scroll:默认值(背景位置是按照当前元素进行偏移的)

fixed:(背景位置是按照浏览器位置进行偏移的)

加滚动条的方式:

移动端选中的背景色改变jquery_背景图片_06

7css边框样式

1.border-style:边框的样式

solid:实线

dashed:虚线

dotted:点线

2.border-width:边框的大小

3.border-color:边框的颜色 (透明颜色:transparent)

注:针对某一条边进行单独设置:border-left -style(中间是方向 left 、right、top、bottom)

移动端选中的背景色改变jquery_选择器_07

8.css文字样式

1.字体类型

font-family:字体类型
eg英文字体: Arial , ‘Times New Roman’
中文字体:微软雅黑,宋体

<title>文字样式</title>
    <style>  #div1{font-family:"Times New Roman";}   #div2{font-family:"方正舒体","宋体"}  
    </style>
    </head> 
    <body>
    <div id="div1">Arial</div>
    <p>默认Arial</p>
    <div id="div2">方正舒体</div>
    <p>默认微软雅黑</p>
2.衬线体和非衬线体

移动端选中的背景色改变jquery_背景图片_08


注意事项:1.添加多字体 2.引入引号

3.字体大小粗细

1.font-size:字体大小
默认大小:16px
写法(一般设置成偶数):div{font-size: 60px;} 2.font-weight:字体粗细
模式:正常(normal) 加粗(bold)
写法:单词(normal、bold)或者number(100~500都是正常的,600 ~900都是加粗的)div{font: weight bold/ 300px;} 3.font-style:正常(normal)斜体(italic)
写法:单词(normal、italic)
div{font-style:oblique;color:red}

9.css段落样式

1.text-decoration:文本修饰

下划线:underline

删除线:line-through

上划线:overline

不添加任何修饰:none

注:可添加多个文本修饰:通过空格隔开

写法: p{text-decoration: overline underline line-through;}

2.text-transform :文本大小写(针对英文段落)

小写:lowercase

大写:upercase

之针对首字母大写:capltalize

写法: p{text-transform: uppercase;}

移动端选中的背景色改变jquery_选择器_09

3.text-indent:文本缩进
首行缩进
em单位:相对单位1em永远都是跟字体大小相同。
写法:p{font-size:1em; text-indent: 25px;}

4.text-align:文本对齐方式

对齐方式:left,right,center,justify(两端点对齐)

写法:p1{text-align:right} 5.line-height:定义行高

一行文字的高度上边距和下边距是等价关系。

默认行高:不是固定值,而是变化的。根据当前字体的大小不断地变化

取值1.number(px)2.scale(跟文字大小的比例值)

写法:p{line-height: 30px;

6letter-spacing:定义字之间的间距

word-spacing:定义定义英文词之间的间距

强制折行:(针对英文)

若英文和数字不自动折行:

7word-break:break-all(强烈执行):
word-wran:break-word:会产生一些空白区域
写法:p{width: 330px; height:600px;border:1px solid;border-color:red; word-break:break-all}

10.css复合样式。

一个css属性值控制一种样式,叫做单一样式。

一个css属性控制多种样式,叫做复合样式。

复合的写法是通过复合的方式实现的

复合写法有的是不需要关心顺序的例如:background,border。有的是需要关心顺序的,例如:font( *注:最少有两个值 size family * )

1.background、border、font

注意:font中size在family前面
weight style size family √
style weight size family √
weight style size/line- height family √
一般不要与单一样式混写,若非要混写则先写复合样式再写单一样式,防止样式被覆盖。

写法:div{width: 60px;height:60px; background:red url(../images/购物车.png)no-repeat center center border-right: 6px black dashed ;font:bold 30px 方正舒体 ; 展示:

移动端选中的背景色改变jquery_背景图片_10

11.css选择器

1.ID选择器
css:#elem{ }
html:id=“elem”
注:1.id是唯一值,出现多次是不符合规范的
2.命名的规范,由字母、下划线、中划线、字母(并且第一个不能是数字)
3.命名方式:驼峰式写法:searchButton
短线写法:search-small-button
下划线写法:search_small_button

12.class选择器

.elem{ }
css:elem{ }
html:class=“elem”
注意1.class选择器是可可以复用的。
2.可以添加多个class样式。
3.多个样式的时候,样式的优先级根据css决定,而不是class属性中的顺序
4.标签+类的写法

<style>
     p.box{background:red}
     .box{background:yellow}
    </style>
</head>
<body>
    <div class="box">这是一个块</div>
    <p class="box">这是又一个块</p>
    <div class="box">这又又是一个块</div>
</body>

展示:

移动端选中的背景色改变jquery_1024程序员节_11

13.标签选择器(TAG选择器)

div{ }
< div>< /div>
使用的场景:
1.去掉某些标签的默认样式时
2.复杂的选择器中,如层次选择器

14.群组选择器(分组选择器)

可以通过逗号的方式,给多个不同的选择器添加统一的css样式,来达到代码的复用。

移动端选中的背景色改变jquery_1024程序员节_12

15.配速选择器

*{ } -> div,ul,li,p,h1,h2…{}
注:尽量避免使用通配选择器,因为会给所有的标签添加样式,慎用。
使用的场景:
1.去掉所有标签的默认样式时

16.层次选择器

后代: M N( ) ul li{border:1px red solid;}在这里插入代码片

移动端选中的背景色改变jquery_选择器_13

父子: M>N #list >li{border:1px red solid;}

移动端选中的背景色改变jquery_1024程序员节_14

兄弟 : M~N div~h2{background: red;}当前M下的所有兄弟N标签

移动端选中的背景色改变jquery_选择器_15

相邻:M+N{}div+h2{background: red;} 当前 M下面相邻的N标签

17.属性选择器

M[attr]{ }
= :表示部分匹配
*=:完全匹配
^=:起始匹配
$=:结束匹配

div[class$=search]{background-color: red;}
......
<div>aaaaa</div>
<div class="box-search">bbbbb</div>
<div class="search-box">ccccc</div>

移动端选中的背景色改变jquery_选择器_16

18.伪类选择器

1.css伪类用于向某些元素添加特殊的效果。一般用于初始样式添加不上的时候,用伪类来添加。
写法:M:伪类{ }
:link 访问前的样式(只能添加给a样式)
:visited 访问后的样式(只能添加给a样式)
:hover 鼠标移入时的样式(可以添加给所有样式)
:active 鼠标按下时的样式(可以添加给所有样式)
注:

  1. link visited只能给a标签加, hover和active 可以给所有的标签加。
    2.如果四个伪类都生效,一定要注意顺序: LV H A。
    3.一般网站只这样去设置: a{} a:hover{}.
    写法:
`a{color: gray;}
a:hover{color:red}`
.....
`<a href="">这是一个链接</a>`

展示:

移动端选中的背景色改变jquery_选择器_17


2.:after、:before通过伪类的方式给元素添加一段文本内容。使用content属性

写法:

div:after{content:"world";color:red;}
...
<div>hello</div>

移动端选中的背景色改变jquery_css_18


3.:check、:disabled、:focus 都是针对表单元素的

:disabled{width:100px;height:100px}
......
<input type="text" disabled>
<input type="text">
<input type="text">

移动端选中的背景色改变jquery_移动端选中的背景色改变jquery_19

4.结构性伪类编辑器

:nth-of-type()、:nth-child()
角标是从1开始的,1表示第一项,2表示第二项
除此之外还可以取n值:表示从0到无穷大(2n表偶数)

li:nth-of-type(3){background-color: red;}
......
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>

移动端选中的背景色改变jquery_背景图片_20

:first-of-type()、:first-shild 第一个被标注样式
last-of-type()、:last-child 最后一个被标注样式
:only-of-type()、:only-child 只有一个才生效