（自考专升本）《css》知识点学习知识点串讲笔记

《css》知识点学习笔记

一、什么是CSS?

全称:层叠样式表，修饰和美化HTML页面中的元素（静态、动态都可以）

二、如何用css

1.基本语法：选择器{样式1；样式2}样式:color:red;

例子:hl{color:red;font-size:20px;}

三、在哪里写入CSS样式？

1.内部样式：〈style>〈/style>写在html页面中head标签内

2.夕卜部样式:在html页面head标签内:〈linkhref="css文件地址”>

3.行内样式:在某一个标签内，style=""<pstyle="color:red;n>我是标签</p>

备注:优先级行内样式〉内部样式》外部样式

四、CSS选择器

1.标签元素选择器：标签名{}

2.类选择器：<pclass="one">p标签</p>.one{}

3.id选择器:<pid="two”>p标签〈/p>#two{}

备注：id选择器需要注意:一个html页面中不能有重复的id名字

优先级：标签选择器（class选择器<id选择器

4.层次选择器：

（1）AB{}选中页面中A标签下的所有B元素（包括孙子）

例：ulli{color:red;}---->所有的li标签内容都是红色

<ul>

<li>222</li>

</ul>

（2）A>B{}选择页面中A标签下儿子辈的B元素

例:ul>li{coloured;}---->第一个的li标签内容是红色

<ul>

<ol>

<li>222</li>

</ol>

</ul>

（3）A+B{}选中A标签相邻的兄弟元素B,且只选中第一个

例：hl+p{color:red;}---->第一个p标签内容变红

〈111>我是标题</111>

〈P>我是段落</p>

<P>我是段落</p>

（4）A、B{}选中A标签相邻的所有兄弟元素B

例：hl'p{color:red;}---->所有p标签内容都变红

<hl〉我是标题</hl>

<P>我是段落</p>

<p>我是段落</p>

5.结构伪类选择器：

(1)A:nth-child(index){}A代表标签选择器，index代表下标（从1开始计数）

(2)A:nth-child(参数){)参数的值：odd奇数行、even偶数行

(3)A:first-child{}选择第一个A元素

(4)A:last-chiId{}选择最后一个A元素

例：

li:first-child{color:red;}——＞第一个li标签内容变红

li:last-child{color:red;}—＞最后一个li标签内容变红

li:nth-child(3){color:red;}—＞第三个个li标签内容变红

li:nth-child(odd){color:red;}—＞奇数行li标签内容变红

li:nth-child(even){color:red;}一＞偶数行li标签内容变红

<ul>

<li>lll</li>

<li>222</li>

<li>333</li>

<li>444</li>

<li>555</li>

</ul>

(5)A:hover{)鼠标滑过A元素后的样式

例：span:hover{color:red;}----->当鼠标滑倒span标签上，标签内容变成红色

<span>鼠标滑过变成红色</span>

(6)a:visited{}鼠标访问过a标签后的样式

例：a:visited{color:green;}--)当鼠标点击了a标签,a标签颜色变为绿

色

<ahref="">百度</a>

6.属性选择器：

(1)A[attr]:选中带有attr属性的所有A元素

(2)A[attr="B"]:选择带有attr属性并且值为B的所有A元素

(3)B"]:选择带有attr属性并且值开头字母为B的所有A元素

(4)A[attr$二”B"]:选择带有attr属性并且值结尾字母为B的所有A元素

例：

input[name]{width:200px;height:40px;}----->选中所有含有name属性的input标

签

input[name=,,username]{width:200px;height:40px;}

---->选中所有name属性值为username的input标签

input[name]{width:200px;height:40px;}---->选中name值首字母为u的

input标签

input[name$=,,x,?]{width:200px;height:40px;}---->选中name值结尾字母为x的

input标签

<inputtype="text"name="username”>

<inputtype="radio“name="sex”>

<inputtype="radio“name="sex”>

总结：

1、页面中尽量不要用id选择器

2、li多用nth-child选择器

3、在表单获取动态数据时，多用属性选择器

五、CSS样式：选中器{属性:值;}

1.字体样式

(1)font-size:Ipx;字体大小

(2)font-weight:normal;字体正常大小

font-weight:bold;字体加粗

font-weight:bolder字体更粗

(3)font-style:normal;字体风格:正常

font-style:italic;字体风格:斜体

font-style:oblique;字体风格:倾斜

(4)font-family:宋体”；字体样式

2.文本样式：

(1)color:颜色；文本颜色百度搜索:css颜色对照表#FFFFFF白色

(2)text-align:left或center或right;文本左居中右对齐

(3)line-height:npx;文字垂直居中对齐,需要n的值与元素的height相等

例：p(

width:400px;

heigth:40px;

text-align:center;文本水平居中

1ine-height:40px;文本垂直居中

)

＜p＞哈哈哈＜/p＞

(4)text-decoration:none(没有线)、underline(下划线)、overline(上划线)、line-

through(贯穿线)

(5)word-spacing:lem;文字与文字之间的间距

(6)text-indent:lem;文字首行缩进

(7)text-shadow:颜色x轴y轴模糊半径;

例：text-shadow:red10px10px5px;通常结合文本颜色一起使用

color:green;

3.背景样式：

(1)background-color:颜色；背景颜色

(2)background-image:ulr(图片路径)；背景图片

(3)background-repeat:no-repeat(不平铺)、repeat-x(沿x轴平铺)、repeat-y(沿着

y轴平铺)

(4)background-position:x轴像素、y轴像素；

(5)background-size:宽度高度；

(6)background:linear-gradient(to方向，颜色1,颜色2);

4.鼠标滑过样式：

(1)cursor:值；text文本、wait等待、help帮助、pointer小手、corsshair十字光

标

例：span{

cursor:pointer;----＞鼠标滑倒span标签上，鼠标变成小手

)

＜span＞鼠标滑过变样子＜/span＞

5.盒子模型

(1)盒子组成：元素本身+内边距(padding)+边框(border)+外边距(margin)

(2)内边距:padding用法

padding:值；只写一个值，设置元素上下左右方向的内边距

padding:值1值2;写两个值，值1上下方向、值2左右方向

padding:值1值2值3;写三个值,值1上方向、值2左右方向、值

3下方向

padding:值1值2值3值4;写四个值，分别代表上右下左

例：p(

padding:10px;——＞元素本身在上下左右四个方向距离边框都有10像素

padding:10px5px;----＞上下方向有10像素，左右方向有5像素

padding:5px6px7px;----＞上5像素，左右距离6像素,下7像素

padding:Ipx2px3px4px;----＞上Ipx、右2px、下3px、左4Px

)

＜P＞我是段落〈/p＞

备注:用来控制元素本身距离边框的距离

(3)margin:用法同padding一样

备注:margin

特殊用法：margin:0auto;让元素居中，前提是:此元素有宽度

(4)border:Ipxsolid颜色；solid是实线，可替换为:dotted虚线

(5)border-raidus:用法同padding一样；通常设置值为元素的宽高一半

六、浮动与display

1.display用法

(1)display:inline;----＞将元素定义为:行内元素

(2)display:block;----＞将元素定义为：块级元素

(3)display:inline-block;---＞行内元素特性：同行排列、块级元素特性:设置宽高

这玩楞是个坑,尽量别用

(4)display:none;-----＞隐藏元素

2.浮动用法：

(1)float:left;----＞让元素左浮动

(2)float:right;----＞让元素右浮动

(3)浮动特性：

当元素浮动时,下一个元素会被覆盖,文本内容、图片内容不会被覆盖

例：浮动不会覆盖文字.html

当多个元素同浮动时，多个元素同行显示,inline-block的特性

例：多个元素浮动同行排列.html

当父级元素宽度为400,子级三个元素宽度总和超过400,那么三个元素在浮动时候，

第三个元素会另起