CSS样式

1.CSS语法

1.内联方式

特点：将CSS内容定义在HTML标记中

语法：

（1）样式声明由样式属性名以及值来组成

（2）多个样式声明之间用 ; 做连接

常用样式属性和值：

（1）设置文本颜色的属性和值

属性：color

值：合法的颜色值（英文）

（2）设置背景颜色的属性的值

属性：background

值：合法的颜色值（英文）

（3）设置文字大小的属性和值

属性：font-size

值：以 px 或 pt 为单位的数值

练习：创建一个div标记，内容随意，设置该标记内的文本颜色为黄色，背景颜色为红色，文字大小为16px

        <div style="color:yellow;background:red;font-size:16px;">
            <p>春晓</p>
            <p>春眠不觉晓</p>
            <p>处处闻啼鸟</p>
            <p>夜来风雨声</p>
            <p>花落知多少</p>
        </div>

2.内部样式表

在网页中的一个独立的地方声明网页要用到的所有的样式

语法：

<head>
  <style>
    /*注释*/
    样式规则1
    样式规则2
    ……
    样式规则n
  </style>
</head>

样式规则：由选择器和样式声明组成

选择器：规范了页面中哪些元素能够使用声明好的样式，其实就是为了匹配页面中的元素

样式规则：

选择器 {样式声明1;样式声明2}

练习：新建一个网页，创建若干 p 标记和 h3 标记，内容随意，使用内部样式表将页面中的 p 标记设置为颜色为蓝色，文本大小为 23px，h3标记设置文本颜色为灰色，背景颜色为橙色

		<style type="text/css">
			p{
				color: blue;
				font-size: 23px;
			}
			h3{
				color: silver;
				background: orange;
			}
		</style>

3.外部样式表

独立于任何网页的位置处，声明一个样式表文件（***.css），在文件中声明样式，在使用的网页中进行引入。

<!-- 在外部文件创建格式跟内部样式表格式相同 -->
<!-- 在使用的网页中引入 -->
<head>
	<link rel="stylesheet" href="xxx.css">
</head>

2.CSS样式表特征

1.继承性

必须是父子（有层级关系）结构

大部分的css效果是可以直接继承给子元素的

2.层叠性

可以为一个元素定义一个样式规则，规则中的属性不冲突时，可以同时应用到当前元素上

3.优先级

在层叠性基础上，如果样式冲突（重复）的话，则按照默认的优先级去应用样式

优先级由低到高：

（1）浏览器默认设置

（2）样式表（内外部）：就近原则 - 后定义者优先

（3）内联方式

4. !important 原则（显示调整样式属性优先级）

样式属性：值 !important;

!important 加在谁的后边，就以谁为主

3.CSS基础选择器

1.通用选择器

可以与页面上的任一元素相匹配

语法： *{样式声明}

2.元素选择器

设置页面上某种元素的默认样式

语法：标记{样式声明}

3.类选择器

定义页面上某个或某些元素的样式

特点：通过元素的class属性进行引用的选择器

语法：

1.声明
 .类名{样式声明}
  注意：
    1. 点 不能省略
    2.类名不能以数字开头
    3.由英文，- ，_ 来组成
2.引用
 <ANY class="类名">

特殊用法：

（1）分类选择器的定义方式

将类选择器和元素选择器结合使用

语法：元素选择器 . 类选择器{ }

（2）多类选择器的引用方式

让元素引用多个类选择器

语法：<ANY class="c1 c2 c3">

4.id选择器

作用：与ID属性联用，为了设置指定ID元素的样式

语法：#ID值{ ... }

5.群组选择器

作用：将多个选择器放在一起进行样式的声明定义

语法：选择器1，选择器2，选择器3，……{……}

6.后代选择器

作用：通过元素的后代关系匹配元素

语法：选择器1 选择器2{}

7.子代选择器

作用：通过元素的子代(一层层级)关系匹配元素

语法：选择器1>选择器2{}

8.伪类选择器

作用：匹配元素不同状态的选择器

语法：所有的伪类都是以 : 作为开始的选择器：伪类选择器{……}、

（1）链接伪类

:link 匹配元素尚未被访问时候的状态
ex: a:link{ ... }
:visited 匹配元素访问过的状态
ex: a:visited{ ... }

（2）动态伪类

:hover 匹配鼠标悬停在元素上时的效果

:active 匹配元素被激活时的状态超链接，文本框和密码框点击的时候就是active

:focus 匹配元素获取焦点时的状态文本框和密码框

练习：新建一个页面，增加一个 a 标记，设置未被访问时，颜色为黑色，没有下划线，鼠标悬停的时候，增加下划线(text-decoration:underline)，被激活时(点击的一瞬间)，文本为orange色，访问后的时候，颜色变为绿色(green)；页面增加一个 input 文本框，默认效果颜色为灰色，字体为斜体(font-style:italic)，被激活时，字体为非斜体(font-style:normal)，获取焦点时，文本颜色为绿色(green)

        <style type="text/css">
            a:link{
                color: black;
                text-decoration: none;
            }
            a:hover{
                text-decoration: underline;
            }
            a:active{
                color: orange;
            }
            a:visited{
                color: green;
            }
            #d2{
                color: silver;
                font-style: italic;
            }
            #d2:active{
                font-style: normal;
            }
            #d2:focus{
                color: green;
            }
        </style>

4.尺寸与边框

1.尺寸单位

（1）px：像素

（2）in：英寸

（3）pt：磅（1pt=1/72in 多用于表示文字大小）

（4）%

（5）cm、mm、em、rem

2.颜色取值

（1）rgb(r,g,b) r,g,b取值范围：0~255

（2）rgba(r,g,b,alpha) alpha：透明度，0-1之间的小数，越大，不透明度越高

（3）#rrggbb 由六位十六进制的数字表示一个颜色

（4）#rgb #rrggbb的缩写 #112233 ->#123 #112234 无缩写

（5）表示颜色的英文单词

3.尺寸属性

语法：

（1）宽度

width：宽度

min-width：最小宽度

max-width：最大宽度

（2）高度

heigh：高度

min-heigh：最小高度

max-width：最大高度

页面中允许设置尺寸的元素

（1）所有的块级元素都允许设置尺寸

（2）行内块元素允许设置尺寸表单控件元素（单选按钮、复选框特殊对待，有最大限制）

（3）本身具备width和height的HTML元素 img、table

注意：大部分的行内元素是无法修改尺寸的

4.溢出处理

当内容多，元素小的时候，就会产生溢出的效果，默认都是纵向溢出

属性：overflow, overflow-x, overflow-y

取值：

（1）visible 可见的，默认值，溢出可见

（2）hidden 隐藏的，溢出的内容全部隐藏，不可见

（3）scroll 显示滚动条，溢出时，可用

（4）auto 自动，溢出时才显示滚动条并可用

posted @ 2020-10-09 10:25 you_rgb 阅读(324) 评论(0) 收藏举报

刷新页面返回顶部

you_rgb

CSS样式

1.CSS语法

2.CSS样式表特征

3.CSS基础选择器

4.尺寸与边框

公告