网页设计

最新推荐文章于 2020-08-08 15:16:56 发布

本不应该

最新推荐文章于 2020-08-08 15:16:56 发布

阅读量254

点赞数 1

本文链接：https://blog.csdn.net/benbuyinggai/article/details/102639383

版权

内容
1.智能表单扩展
max-width:表示最大宽度
text-align:字体居中

某些属性样式直接写到form里面不行需要写在style=""里面2.css入门css入门css简介 css指的是Cascading Style Sheets ，即层叠样式表，是一种设计网页样式及布局的技术。所谓“层叠“，实际上指的是将显示样式与显示内容分离。
在Web标准中，表现是赋予页面内容显示的样式，包括版式、颜色和大小等等。也就是说，页面中显示的内容放在结构里，而修饰、美化放在表现里，做到结构（内容）与表现分开，这样，当页面使用不同的表现时，呈现的样式是不一样的。就像人穿了不同的衣服，表现就是结构的外表，W3C推荐使用css来完成表现。

CSS语法
CSS语法
。CSS语法由三部分构成：选择器，属性和值。
select{
property1:value1;
property2:value2;
}

p{
Text-align:center;
Color:red;
Background-color:greenyellow;
}
(1)选择器（selector)是指给页面的哪个或哪些元素定义样式，通常是希望定义样式的元素标签。
（2）属性（property)是定义的具体样式（如颜色、字体等），每个属性都有一个值，属性和值用冒号隔开，并用大括号括起来。
（3)属性和值组成样式声明（declaration),可以定义多个声明，多个声明之间用分号隔开。

当有多个声明时，建议在每行只描述一个声明，这样可以增强样式的可读性，如：

p{text-align;center,color:black;font-family:arial;}
p{
text-align:center;
color:black;
font-family:arial;
}

CSS对大小写不敏感，是否包含空格不会影响CSS在浏览器的效果。

CSS常用选择器

1.元素选择器

元素选择器就是元素自身，定义时直接使用元素标签名称。如定义段落样式，可以选择P元素的名称，即把P作为选择器。例如：

p,h1,form,table,html,table{color:green;}

例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
html{
            background-color: yellow;/*背景颜色*/
}
h1{
            background-color: greenyellow;
            color: red;   /*字体颜色*/
font-size: 50px;/*字体大小*/
font-family: 微软雅黑; /*字体类型*/
}
h2{
            background-color: greenyellow;
            color: red;
        }
p{
            background-color: greenyellow;
            color: red;
        }
</style>
</head>
<body>
这是body内的文字
<h1>这是标题1文字</h1>

2. 通用选择器

通用选择器是一种特殊的选择器，用“*”表示，CSS中的通用选择器与Windows通配符“*”具有相似的功能，可以定义所有元素的样式。如：
- *{font-size:12px; /*<定义文档中所有字体大小为12像素>*/}
- 上面的样式将会影响文档中所有元素，即文档中所有字体大小都被定义为12像素。使用通用选择器时要慎重，一般常用于定义文档中各种元素的共同属性，如字号、字体等。

3. 分组选择器

可以对选择器进行分组，被分组的选择器就可以共享相同的声明。用逗号将需要分组的选择器隔开。
下面的例子中，对所有的标题元素进行了分组，所有的标题元素都是绿色的。

h1,h2,h3,h4,h5,h6{color:green;}

包含选择器

包含选择器是根据元素在其位置的上下文关系来定义样式，也称后代选择器。如在下面代码中，希望列表中的strong元素变为斜体字，而不是默认的粗体字。

<ol>

</ol>

可以定义如下派生选择器，这样只有li元素中的strong元素样式为斜体字。

li strong{font-style:italic;font-weight:normal;}

5. id选择器（精确定位）

id选择器使用元素的id属性值为元素指定样式，id选择器必须在元素的id属性值前加“#”。如:

#red{color:red;}

#green{color:green;}

在下面的HTML代码中，id属性为red的p元素显示为红色，而id属性为green的p元素显示为绿色

<p id="red">这个段落是红色。</p>

<p id="green">这个段落是绿色。</p>

id选择器常用于建立包含选择器。例如：

#sidebar p{font-style:italic;text-align:right;}

类选择器
类名的第一个字符不能使用数字！它无法在Mozilla或Firefox中起作用。
和id选择器一样，类选择器也常常被用作派生选择器。例如：

.one td{color:#f60;background:#666;}

类名为one的元素内部的表格单元格都会以灰色背景显示橙色文字

7. 子元素选择器

子元素选择器只能选择作为某元素的子元素声明样式，子选择器使用“>”号。
如希望选择只作为h1元素的子元素strong，可以这样写：

h1>strong{color:red;}

这个规则会把下面代码中第一个h1下面的strong元素变为红色，但是第二个strong不受影响。

8. 小总结：

1.元素选择器  html{}
2.统配符选择器   *
3. 分组选择器 h1，h2{}
4. 包含选择器 li strong {}
5. id 选择器 #id_name{}
6. 类选择器   .class{}
7.子元素选择器 h1 > strong{}

注意： 4，和 7 的区别：子元素选择器只对子元素起作用而包含选择器对包含在里面的子元素和子孙元素都起作用

CSS样式的3种使用方式

1内嵌方式

内嵌方式指的是将CSS规则混合在HTML标签中使用的方式。CSS规则作为HTML标签的style属性值。例如：

<a style=“font-family:黑体;font-style:italic;font-size:16pt;color:red”>

这是使用样式的超级链接

</a>

内嵌样式只对其所在的标签起作用，其它的同类标签不受影响。

<!DOCTYPE html >

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>CSS使用示例-内嵌样式表</title>

</head>

<body>

<a style="font-family:黑体;font-style:italic;font-size:16pt;color:red">使用内嵌样式的超级链接</a>

<br/>

<a>普通的超级链接</a>

</body>

</html>

2．内部样式表

内部样式表指的是在HTML文档的<head>标记内嵌入样式表，格式如下：

<style type=“text/css”>

selector{

property1:value;

property2:value;

…

}

…

</style>

Eg：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<style>
    p{
        color: green;
    }
    a{
        color: green;
        font-family: "Berlin Sans FB";
    }
   b{
        color: orange;
    }

</style>
<p>这是正文中的字体</p>
<a>这是段落中的文字，会怕<br>继承正文字体的样式</a><br>
<br>
<b>这是超级链接1</b><br>
<b>这是超级链接2</b>


</body>
</html>

3．使用<link>标记链接外部样式表

外部样式表是使用一个单独的文件保存样式规则，扩展名为“.css”，需要使用样式表的HTML文件链接样式表文件。
链接样式表使用<link>标签，此标签作为<head>的子标签使用，指明当前HTML页面和链接的样式表之间的关系，其格式为：

<link href=“…” rel=“stylesheet” type=“text/css”/>

其中：

href是外部样式表的路径，一般使用相对路径；
rel指的是被链接的文件的类型，stylesheet表示被链接的是CSS文件；
type指的是被链接的文件的内容类型；

作业

1.学过的相关属性

border	表格边框宽度
width	宽度
height	高度
cellspacing	相邻单元格间距
cellpadding	边沿和内容的间距
size	文字大小
color	字体颜色
face	文字类型
type	类型
target=” _blank “	新窗口跳转
alt	图像的替代文本
src	引用图像的url,一般使用相对路劲

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<style>
  p{
      color: red;
      font-family: Algerian;
  }
    a{
        color: blue;
        font-family: Bahnschrift;
        font-style:italic;
    }

</style>
<p>黄鹤楼送孟浩然之广陵</p>

    <a>故人西辞黄鹤楼</a><br>
    <a>烟花三月下扬州</a><br>
    <a>孤帆远影碧空尽</a><br>
    <a>惟见长江天际流</a><br>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<style>
    p{
        color: green;
    }
    a{
        color: green;
        font-family: "Berlin Sans FB";
    }
   b{
        color: orange;
    }

</style>
<p>这是正文中的字体</p>
<a>这是段落中的文字，会怕<br>继承正文字体的样式</a><br>
<br>
<b>这是超级链接1</b><br>
<b>这是超级链接2</b>


</body>
</html>

本不应该

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
网页设计

内容1.智能表单扩展max-width:表示最大宽度text-align:字体居中某些属性样式直接写到form里面不行需要写在style=""里面2.css入门css入门css简介 css指的是Cascading Style Sheets ，即层叠样式表，是一种设计网页样式及布局的技术。所谓“层叠“，实际上指的是将显示样式与显示内容分离。在Web标准中，表现是赋予...
复制链接

扫一扫