css应用

最新推荐文章于 2023-07-17 15:08:38 发布

myiteyeverywell

最新推荐文章于 2023-07-17 15:08:38 发布

阅读量170

点赞数

分类专栏： java 文章标签： css

本文链接：https://blog.csdn.net/myiteyeverywell/article/details/84015621

版权

java 专栏收录该内容

32 篇文章

订阅专栏

CSS

本章目标

1、CSS的定义、优势

2、css的基本语法

3、引入css的方式

4、css的选择器

重点与难点

1、 Css的引用方式和选择器

要讲的内容

1. 基本的语法

选择器的名称{

属性名:属性值（有些情况要加上引号）;

}

比如标记选择器的语法：

div{

color:red;

font-size:20px;

}

2. 三种选择器的命名方式，引用方式以及适用的范围

a) 标记选择器

命名方式：

tagname{

color:red;

font-size:20px;

}

Tagname指的是已有标签的名称所以该选择器只能采用已有标签作为选择器的名称

适用范围：页面中所有该标签的元素都适用页面中的标签不需要引用即可实现效果

b) 类型选择器

命名方式：

.anyname{

color:red;

font-size:20px;

}

Anyname指的是任意的名称不受命名的限制

适用范围：页面中某些class属性值等于该选择器的名称的元素起作用适用于单个的元素

只需在需要用到该选择器的元素加上class属性使其值等于该名称即可可以在页面中多次使用同一个类型选择器

c) ID选择器

命名方式

#anyname{

color:red;

font-size:20px;

}

其中anyname可以是任意的名称

适用范围：页面中的id属性值为该选择器名称的元素起作用使用于单个的元素

注意：与类型选择器的区别

1. 定义和引用方式不同

2. 类型选择器可以在页面中重复使用而id选择器在页面中只使用一次

3. 引用css的三种方式

1. 第一种引用方式定义内部样式块对象

在head中写<style type="text/css"></style> 然后再改style标签中写css的代码

2. 内联定义

在制定的标签的style属性直接写该标签的css的样式

比如 <h3 style="color: orange;font-size: 40px">专题扫描用户硬盘文件股票1日缩水百亿 </h3>

3．引入外部css文件真正意义上实现表现形式和表现内容完全相分离推荐使用的方式。

如何将CSS样式加入网页：{

1、定义内部样式块对象；<style type=”text/css”>……</style>

2、内联定义；<h1 style=”font-size:20px;color:blue”>Hello</h1>

3、链入外部样式文件。<link rel=”stylesheet” href=”03.css” type=”text/css”>

例如：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>firstcss.html</title>

input {

width: 170px;

height: 25px;

color: red;

}

</style>

</head>

<body>

<tr>

<td>

邮箱 :

</td>

<td>

</td>

</tr>

<tr>

<td>

密码 :

</td>

<td>

</td>

</tr>

<tr>

<td>

</td>

<td>

</td>

</tr>

</table>

</form>

</body>

</html>

}

选择器：{

<!-- css的第一种选择器标记选择器要选取已有标签作为该选择器的名称{}

使用方式：无需引用

适用范围：对于页面中所有的该选择器对应的标签都起作用

css的第二种选择器类型选择器定义的语法：.任意的名称 {}

使用方式：需要用到类型选择器的元素的class属性值等于该选择器的名称即可

适用范围：对于页面中所有的class属性等于该名称的元素都起作用可以重复使用

css的第三种选择器 ID选择器定义的语法 #任意的名称 {}

使用方式：需要使用到id选择器的元素的id属性值等于该选择器的名称即可

适用范围：对于页面中所有的id属性等于该名称的元素都起作用但是由于id是代表该元素在页面的唯一标示所有id选择器使用只建议使用一次

通常情况下id选择器用类型选择器代替

-->

h1{

color: red;

font-size: 50px;

font-weight: lighter;

}

h2{

color: green;

font-size: 25px;

}

div {

text-align : right;

layout-flow:vertical-ideographic;

color: orange;

font-size: 20px;

font-weight: bold;

background-image: url("../images/555.jpg");

}

input {

height: 25px;

width: 170px;

}

* 类型选择器

.first{

color: blue;

font-size: 100px;

}

* ID选择器

#second{

color: olive;

font-size: 50px;

}

</style>

}

下拉列表分组：{

<option value="002">您母亲的姓名？</option>

<option value="003">您父亲的姓名？</option>

</optgroup>

<option value="002">您母亲的生日？</option>

<option value="003">您父亲的生日？</option>

</optgroup>

<option value="002">您母亲的职业？</option>

<option value="003">您父亲的职业？</option>

</optgroup>

}

级联菜单：{

例如：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>testcity.html</title>

function createSecondLevel(obj){

var city = document.getElementById("city");

city.options.length = 1;//清空option的方式

var option1;

var option2;

var option3;

var option4;

if(obj == "001"){

option1 = new Option("石家庄市","001001");//创建option的方式

option2 = new Option("保定市","001002");

option3 = new Option("沧州市","001003");

option4 = new Option("承德市","001004");

}

if(obj == "002"){

option1 = new Option("郑州市","002001");

option2 = new Option("洛阳市","002002");

option3 = new Option("开封市","002003");

option4 = new Option("南阳市","002004");

}

if(obj == "003"){

option1 = new Option("济南市","003001");

option2 = new Option("青岛市","003002");

option3 = new Option("潍坊市","003003");

option4 = new Option("威海市","003004");

}

city.options.add(option1);//添加option的方式

city.options.add(option2);

city.options.add(option3);

city.options.add(option4);

}

</script>

</head>

<body>

</select>

</select>

</select>

</body>

</html>

}

背景图片：{

}

实例计算器：{

input{

width: 55px;

height: 36px;

font-size: 15px;

font-weight: bold;

}

.first {

width: 55px;

height: 80px;

font-size: 17px;

font-weight: bold;

}

#total{

width: 290px;

height: 40px;

font-size: 30px;

font-weight: bolder;

color: green;

text-align: right;

}

</style>

</head>

<body>

<tr>

</td>

</tr>

<tr>

算式提示:

</td>

</tr>

<tr>

<td>

</td>

<td>

</td>

<td>

</td>

<td>

</td>

</td>

</tr>

<tr>

<td>

</td>

<td>

</td>

<td>

</td>

<td>

</td>

</tr>

<tr>

<td>

</td>

<td>

</td>

<td>

</td>

<td>

</td>

</td>

</tr>

<tr>

<td>

</td>

<td>

</td>

<td>

</td>

<td>

</td>

</tr>

</table>

</body>

}