CSS学习笔记

来源：互联网发布：唐青枫捏脸数据编辑：程序博客网时间：2024/06/13 01:03

CSS

<center></center>用了一个标签，使内容居中

CaseCade StyleSheet 级联样式单

样式的编写有三种方式

第一种:内联样式，使用style声明样式

第二种: 内部样式

<head>

<style>

…..

</style>

</head>

第三种:外部样式

<head>

</head>

内联样式少使用，内部样式全站中只有一个页面风格的拥有的样式,推荐使用外部样式，但是在使用的时候不要太多。

CSS：基本语法

属性名:属性值

选择器{/*该样式的作用*/
属性名:属性值

……

}

Css选择器:重点/难点:

1.通过选择器:选择页面中的所有元素

*{}

2.元素选择器:选择指定的元素

xxx{}

3 ID选择器加#:选择具有指定id的元素

#id{}

Css常用属性的重点与难点:

4 类选择器:选择具有指定类名的标签内容

.类名 {}

5 并列与过滤选择器选择器1 选择器2 选择可被两个选择器同时选定的元素如.product .mark{….}

6父子选择器选择器1 选择器2{….} 例如

{

Div span{…}//Div下的span元素

div .span{…}//Div下的类名为span的元素

}

7 直接子元素选择器

选择器1 > 选择器2 选中子元素1下面的直接子元素2 div>span{….}

7 多选选择器

选择器1,选择器2，选择器3…..选择器n{…}

8 伪类选择器: :伪类名{….}

x:link{….}//未被访问过的链接呈现什么样式

x:visited{…..}//访问过的连接呈现什么样式

x:hover{……}//当鼠标悬停在元素上方的时候

x:active{…..}//当鼠标元素被激活的时候,也就是按下的时候

x:focus{……}//元素获取焦点的时候

css样式的级别:!important->内联->#id选择器->类选择器/伪类选择器->内部/外部样式->元素选择器->浏览器预定义样式

css中的尺寸

相对尺寸:

所占父元素的百分比 %

Px 像素，指频幕上的一个点

Em:表示标准字体大小

绝对尺寸:

在web应用开发过程中几乎不用相对尺寸

cm:厘米

mm:毫米

in:英寸

pt:磅

css中的颜色:

(1) 英文字母表示法:red greenyellow

(2) Rgb(xxx,xxx,xxx) 如:span{color:rgb(255,0,0)}

(3) Rgb{xx%,xx%,xx%,} 如:span{color:rgb(30%,50%,0%)}

(4) 六位得16进制数如:#fsdfsa

(5) 三位得16进制数如:#ff0

属性

width

Height

Min-width

Max-width

Min-height

Max-height

overflow

Visible

Hidden

Scroll

auto

Border-width

边框的属性

Border-style

边框的属性

None//没有

Solid//默认实线

Double//双实线得效果

Dotted//双虚线

Dashed//虚线

…..

Border-color

边框的属性

Transparent透明的颜色

border

边框样式集合

宽度线条颜色

2px solid #fdffff

Outline-color

外围轮廓

#dsfsaf

Outline-width

轮廓宽度

#1px

Outline-style

轮廓样式

None//没有

Solid//默认实线

Double//双实线得效果

Dotted//双虚线

Dashed//虚线

…..

outline

颜色样式轮廓

#dsffsf dashed 2px

Border-radius

边框半径,绘制圆角边框

可以取 4/3/2/1/也可以是百分比

Box-shadow

边框阴影

不占页面空间

h-shadow水平阴影(必须)

v-shadow 竖直阴影(必须)

blur 可选为模糊距离

spread 扩展半径

color 为颜色（必须）

inset将外部阴影改为内部阴影

Border-image

使用图片做边框

Source:url(box.png)

Width:20

Repeat:round

url(box.png) 20 stretch

url(box.png) 20 repeat

Border-image-width

图片边框的宽度

Border-image-repeat

图片边框是否应平铺/铺满/拉伸

Border-image-source

图片路径

url(a.png)

CSS3选择器

在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素。

"CSS"列指示该属性在哪个 CSS 版本中定义的。（CSS1、CSS2还是 CSS3。）

选择器

例子

例子描述

CSS

.class

.intro

选择 class="intro" 的所有元素。

#id

#firstname

选择 id="firstname" 的所有元素。

选择所有元素。

element

选择所有 <p> 元素。

element,element

div,p

选择所有 <div> 元素和所有 <p> 元素。

element element

div p

选择 <div> 元素内部的所有 <p> 元素。

element>element

div>p

选择父元素为 <div> 元素的所有 <p> 元素。

element+element

div+p

选择紧接在 <div> 元素之后的所有 <p> 元素。

[attribute]

[target]

选择带有 target 属性所有元素。

[attribute=value]

[target=_blank]

选择 target="_blank" 的所有元素。

[attribute~=value]

[title~=flower]

选择 title 属性包含单词 "flower" 的所有元素。

[attribute|=value]

[lang|=en]

选择 lang 属性值以 "en" 开头的所有元素。

:link

a:link

选择所有未被访问的链接。

:visited

a:visited

选择所有已被访问的链接。

:active

a:active

选择活动链接。

:hover

a:hover

选择鼠标指针位于其上的链接。

:focus

input:focus

选择获得焦点的 input 元素。

:first-letter

p:first-letter

选择每个 <p> 元素的首字母。

:first-line

p:first-line

选择每个 <p> 元素的首行。

:first-child

p:first-child

选择属于父元素的第一个子元素的每个 <p> 元素。

:before

p:before

在每个 <p> 元素的内容之前插入内容。

:after

p:after

在每个 <p> 元素的内容之后插入内容。

:lang(language)

p:lang(it)

选择带有以 "it" 开头的 lang 属性值的每个 <p> 元素。

element1~element2

p~ul

选择前面有 <p> 元素的每个 <ul> 元素。

[attribute^=value]

a[src^="https"]

选择其 src 属性值以 "https" 开头的每个 <a> 元素。

[attribute$=value]

a[src$=".pdf"]

选择其 src 属性以 ".pdf" 结尾的所有 <a> 元素。

[attribute*=value]

a[src*="abc"]

选择其 src 属性中包含 "abc" 子串的每个 <a> 元素。

:first-of-type

p:first-of-type

选择属于其父元素的首个 <p> 元素的每个 <p> 元素。

:last-of-type

p:last-of-type

选择属于其父元素的最后 <p> 元素的每个 <p> 元素。

:only-of-type

p:only-of-type

选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。

:only-child

p:only-child

选择属于其父元素的唯一子元素的每个 <p> 元素。

:nth-child(n)

p:nth-child(2)

选择属于其父元素的第二个子元素的每个 <p> 元素。

:nth-last-child(n)

p:nth-last-child(2)

同上，从最后一个子元素开始计数。

:nth-of-type(n)

p:nth-of-type(2)

选择属于其父元素第二个 <p> 元素的每个 <p> 元素。

:nth-last-of-type(n)

p:nth-last-of-type(2)

同上，但是从最后一个子元素开始计数。

:last-child

p:last-child

选择属于其父元素最后一个子元素每个 <p> 元素。

:root

选择文档的根元素。

:empty

p:empty

选择没有子元素的每个 <p> 元素（包括文本节点）。

:target

#news:target

选择当前活动的 #news 元素。

:enabled

input:enabled

选择每个启用的 <input> 元素。

:disabled

input:disabled

选择每个禁用的 <input> 元素

:checked

input:checked

选择每个被选中的 <input> 元素。

:not(selector)

:not(p)

选择非 <p> 元素的每个元素。

::selection

选择被用户选取的元素部分。

1.盒模型:

如果两个元素都指定了margin那么间距会合并,合并后的间距是他们中较大的一个的值.

Outline,box-shadow不会占用页面空间,所以不计入盒子模型的计算。

盒子模型的计算:margin+border+padding+content(width+height)

Float：会对间距合并产生影响

名称

属性

值

Padding-top

填充上

Padding-left

填充左

Padding-right

填充右

Padding-bottom

填充底

padding

10px

10px 20px

12px 22px 23px

10px 20px 22px 32px

上右下左

float

排布方式

Left从左到右依次排开

border-top

填充上

9.714

border -left

填充左

9.714

border -right

填充右

9.714

border -bottom

填充底

9.714

border

margin-top

填充上

margin -left

填充左

margin -right

填充右

margin -bottom

填充底

margin

0 auto 让元素相对于父元素居中

名称

属性

值

Background-color

设置元素的背景色

背景色会占据填充区域，但是不会占据间距

如果有背景图，背景图是在背景颜色的上面

Background-image

背景图片

url(image/xxx.png)

Backgroung-repeat

重复方式

No-repeat

Repeat-x

Repeat-y

repeat

Background-position

背景图的位置

Right bottom

Left bottom

Center center

X y

X% y%

Background-attachment

背景是否滚动

Scroll

fixed

Background-clip

背景颜色的绘制区域

Border-box 只铺到边框

Padding-box只铺到padding

Content-box只铺到内容

Background-origin

背景图的定位区域

Border-box 只铺到边框

Padding-box只铺到padding

Content-box只铺到内容

background

背景

Color:red

url(xxx.png)

repeat:

attachment:scroll

position:x% y%

Background-image

凡是使用了背景图的地方都可以指定渐变的方式

Linear-gradient (angle,color-point)线性渐变

Radial-gradient 径向渐变

Repeating-linear-gradient重复线性渐变

元素的定位:

(1) 流/静态定位 position:static; 不能严格指定位置

(2) 浮动定位 float:left/right; 不能严格指定位置

(3) 相对定位 position:relative; 使用left/right/top/bottom进行定位

占用页面空间: 以其自己作为静态元素的定位原点

(4) 绝对定位 position:absolute; 使用left/right/top/bottom进行定位

不占用页面空间:以最近的祖先元素的padding起点为原点且随着页面内容的滚动而滚动

(5) 固定定位 position:fixed; 使用left/right/top/bottom进行定位

不占用页面空间:以body为定位原点，不随页面的滚动而滚动

CSS中复杂的选择器

选择器名称

事例

含义

选1 选2

Div li{….}

子代选择器

选1>选2

div>li{….}

直接子代选择器

选1+选2

input+span{…..}

相邻兄弟选择器:选择紧挨着的下一个兄弟元素

选1～选2

div～span{…..}

通用兄弟选择器:选择与1具有相同父元素的所有2

[属性名]

选择具有指定属性的元素

[属性名=属性值]

[type=”text”]

匹配具有指定属性且属性值为指定值的元素

元素名[属性名=属性值]

Input[type=”text”]

选择属性名属性值对应的元素

[属性名～=属性值]

[type～=”text”]

选择具有属性名，且属性值中包含指定单词的元素(必须是完整的单词)

[属性名*=属性值]

[type*=”text”]

选择具有属性名，且属性值中具有指定的字母组合的元素(不必是完整的单词)

[属性名^=属性值]

[type^=”text”]

选择具有指定属性且属性中有指定的值开头的元素

[属性名$=属性值]

Class*=”xx”

选择具有指定属性，且属性的值以xx字母结尾的元素

[属性名|=属性值]

Class｜=”xx”

选择指定元素，并且属性值以xx开头的

xxx:target

Div{

Display:none
}

Div:target{

Display:block

}

目标伪类选择器:选定当前锚点的目标元素:<href=”xxx”>

<div id=”xxx”>div成为锚点也就是目标元素

xxx:enable

Xxx为空时，表示匹配所有的

匹配每个xxx已启用的函数

xxx:disabled

匹配每个xxx被禁用掉的函数

xxx: checked

匹配每个xxx已被选中的元素

xxx:first-child

选择属于父元素的第一个子元素的每个xxx元素

xxx:last-child

选择属于父元素的最后一个子元素的每个xxx元素

xxx:only-child

选择属于父元素的唯一一个子元素的每个xxx元素

:empty

Div:empty{….}

匹配没有子元素的父元素

:not(选1)

Div:Not(.strong){…}

Div:not([class=”nihao”]){…}

取反

:first-letter

P:first:letter

选取指定元素中文本的首字母

::select

匹配一段文字中的选择部分

:before

P:Before( content:”子曰” )

可以在内容之前加内容

:after

P:After(content:”—摘自《论语》”)

Div:before{content:url(a.png)}

可以在内容的后面加上内容content后面是纯文本｜图片｜计数器

说明: :xxx伪类选择器 ::xxx伪元素选择器

0 0