html css属性笔记,HTML --css笔记:

HTML --css笔记:

一.css引入方式

1.行内式(不推荐使用):

直接在标签里面加style-css样式,这样是可以添加,但是会出现很同样标签,所以一般不推荐

和使用这样的方式去添加css样式.

使用方法:

这里放设置文本

直接在标签属性添加style-css样式

2.内接样式(页面较小的时候使用哟 ***):

内接样式是针对页面比较小的情况,才会使用.

使用方法:就可以直接在head 标签里面添加:

3.外接样式:

(1) 链接式 ***

这个是常用的方式,链接式一般都是会另外写一个文件,然后通过link 样式文件进来.

使用方法:

(2) 导入式

同样也是另外写css文件然后导入,不建议使用,因为页面css加载不出来时候,会显示 html 的页面,有加载延迟

导入式是使用方法: @import url("这里放css文件")

二.选择器

*** 注意点: css优先级,指的是浏览器加载 cass 样式的先后顺序 ***

1.基本选择器

(1) 标签选择器

直接使用标签名来做选择器,而不是在另外设置属性,调用属性的( 值 )

使用方法:直接标签来写在里面,任何标签都是可以找到的.

p{

color:blue;

}

(2) 类选择器 ***

在标签属性里面设置:

这里放你要修饰的值

使用方法:类选择器前面要加 .+值{ }

.aaa{

color: #fff;

}

***类选择器可以优化: 优化方式: 如果你要修饰的 模块 或 标签 都有同的css样式 ,那么

就可以写在同一个样式,同时调用一个样式就可以,减少代码.

# css样式

.lv{

color: green;

}

.big{

font-size: 40px;

}

.line{

text-decoration: underline;

}

# HTML内容 :公共类 共有的属性

段落1

段落2

段落3

*** 这样的话就会减少写了一般打代码

(3) id 选择器

页面里面 id 是唯一的,给模块、标签等只要设置 id 选择器 无论是在哪里都是可以直接调用

的 但是 id 往往最好留给js使用,除非特殊情况,所以推荐使用类选择器哟.

使用方法:

这里要修饰的值

id调用的话前面必须使用 # 列如: #aaa{ }

*** 这里要注意选择器的权重是: id :100 --> class :10 标签 : 1 所以优先级判断就是谁权重大 谁就获得

修饰权优先.

2.高级选择器

yuan

egon

alex

wusir

(1) 后代选择器(中间要加个空格)

这里使用的是就是 从父亲->儿子->孙子的一个过程就是后代选择器

一定要用到span 才算是后代哟.

使用方法:

.father .box1 span{

/*21*/(这里就是它权重哟)

color:green;

}

(2) 子代选择器(要加上: > 这个符号 )

这里只用到他的儿子,所以这种类型就是子代选择器

使用方法:

.father>.box1{

color:red;

}

注意:设置后,后代也会随着子代改变颜色的哟

(3) 并集选择器( 要加 , 逗号就是 or 的意思)

多个选择器用 , (逗号) 在中间隔开,不然没有效果,一般有共性想才这么设置哟

使用方法:

div,span{

color: red;

}

同时比如在开始建站的时候,网页为更好是使用会设置是样式为例如百度:

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd

, ul, ol, li, pre, form, fieldset, legend, button, input,

textarea, th, td {

margin: 0;

padding: 0;

}

(4) 交集选择器( 两个要连着写,就是 and 的意思 )

交集选择器就是同时满足 同一个条件,例如: alex 这个就是交集选择器

span.sun{

color: #ff6700;

}

3.属性选择器

用户名：

密码：

-属性名称匹配 [key]

通过标签内的属性来设置 css 样式 选用是属性的时候要加上中括号:[ ]

使用方法:

[for]{

color:green;

}

-完整匹配 (key=val)

就是把属性和属性的值全部拿下来当时设置 css 样式

使用方法:

[for=‘username‘]{

color: red;

}

-以什么开头 (key^=val)

把属性和属性的值全部都拿来设置,但是在属性后面加上 ^

使用方法:

[for^=‘pw‘]{

color: green;

}

-以什么结尾 (key$=val)

把属性和属性的值全部都拿来设置,但是在属性后面加上 $

使用方法

[for$="e"]{

color: blue;

}

-包含什么 (key*=val)

把属性和属性的值全部都拿来设置,但是在属性后面加上 *

使用方法:

label[for*="nam"]{

color: yellow;

}

- input[name=xxx]

使用标签里面的属性来 [name=xxx] 来设置他的css 样式

4.伪类选择器

要记住:" 爱恨准则 "

伪类选择器一般使用在 a 链接标签中

• 没有被访问
• 访问过后
• 鼠标悬停
• 鼠标摁住

(1) 没有访问的样式 :link (显示的颜色的)

在使用是时候 link 前面要加上 :

使用方法:

.box ul li.item1 a:link {

color: #666;

}

(2) 访问过后的样式 :visited (显示颜色的)

使用方法:

.box ul li.item2 a:visited {

color: red;

}

(3) 鼠标悬停的样式 :hover (鼠标悬停在上面显示的颜色) ****这个是常用****

使用方法:

.box ul li.item3 a:hover {

color: green;

}

(4) 鼠标按住的时候 :active (按住鼠标不动时候显示是颜色)

使用方法:

.box ul li.item4 a:active {

color: yellowgreen;

}

5.伪类元素选择器

egon

伪类元素的使用就是使用: 标签:方法{ } 有三种: first_letter / before / aftore

(1) 设置第一个首字母发样式 (这里开头字母会突出出来)

使用方法:

p:first-letter{

color: red;

font-size: 30px;

}

(2) 在什么之前 设置样式 这个属性使用不是很频繁,了解就可以了.使用这个伪类选择器 一定要结合content使用

使用方法:

p:before{

content:‘alex‘;

}

(3) 在什么之后 设置样式 (**这个使用的很频繁**) 通常与页面布局的时候, 有很大的关联,结合content使用来 (清除浮动)

使用方法:

p:after{

content:‘&‘;

color: red;

font-size: 40px;

}

三. 继承性和层叠性

1.继承性

就是在设置css的属性,当给父级设置属性的时候,子级就会继承级的属性哟

属性: color font-* text-* line-* 这些属性是可以继承下来的,主要都是文本级的标签

注意: 浮动 绝对定位 固定定位 都是不能被继承的

2.层叠性

这里指就是按照权重大小来决定 权重大就会显示谁的css样式.

主要看的就是用 id 还是类 还是标签来设置: 100 10 1 id 是优先的

四. 盒子型

内边距: padding

边框: border

调整兄弟之间的位置关系: margin

五.块级和行内相互转换

(内行)文本级标签：span、a、b、i、u、em

(块级)容器级标签：div、h系列、li、dt、dd、p(p是文本级标签,但是也属性块级的,特殊标签)

(1)inline 使用方法: 行内转换成块级,一旦给一个块级标签设置css样式 : display: inline;

那么这个块级标签就会变成行内从此不能设置 宽 高 ,同时也可以和其他并排,不在占用一行.

(2)block 使用方法:块级转换成行内,一旦给一个块级标签设置css样式 :display: block;

那么这个行级标签就变成块级标签,独占一行,并且可以设置 宽 高

如果不设置宽 高 就会占一行 ,设置的话就会根据设置来显示哟

(3)inline-block 使用方法: 转换成行内块(两个一起),一旦给一个块级标签设置css样式 :inline-block

那么这个样式就会同时变成 行和块的属性,可以并排,可以设置宽 高

(4) 特殊的行内块级标签:input和img

可以并排,可以设置宽 高

六.浮动

float 就是浮动的意思

有三个值: none(不浮动) left(左浮动) right(右浮动)

1. 浮动的元素脱标

什么叫标准文档流?

- 空白折叠现象

- 高矮不齐,底边对齐

- 自动换行写,一行写不了,就换行

2. 浮动的元素互相贴靠

3. 浮动的元素由 "字围" 效果

4. 收缩的效果

清楚浮动的方法:

- 给父盒子设置高度

- clear :both,在浮动元素后,新建一个空的 div ,给这个标签设置 clear:both;

- 伪元素清楚法(常用****):

.clearfix:after {

content: ‘.‘;

clear: both;

display: block;

height: 0;

visibility: hidden;

}

- overflow：hidden (常用***)

给浮动的元素的父盒子设置,上面的属性

原文：https://www.cnblogs.com/huangjiangyong/p/11067428.html