欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

CSS

程序员文章站 2022-05-26 22:23:33
...

1.概念：CSS指层叠样式表（Cascading Style Sheets）
2。作用：定义如何显示HTML元素样式（规划格式颜色字体摆放位置美化网页）
3.CSS id和类
①id选择器id选择器可以为标有特定ID的HTML元素指定特定的样式。HTML元素以ID属性来设置ID选择器，CSS中的ID选择器以“＃”来定义
代码如下：

<p id="con_red">我是段落1,我要变成红色</p>
<style>

使用 <style> 标签在文档头部定义
  #con_red{
      font-size: 18px;
      color:red ;
  }
</style>

②class 选择器
class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。
class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点”.”号显示：

<p class="con_yellow">我是段落2，我要变成黄色</p>
<p class="con_yellow">我是段落2，我要变成黄色</p>

使用 <style> 标签在文档头部定义
.con_yellow{
    color: yellow;
    font-size:22px ;

所有拥有 center 类的 HTML 元素均为居中。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
.center
{
    text-align:center;
}
</style>
</head>

<body>
<h1 class="center">标题居中</h1>
<p class="center">段落居中。</p> 
</body>
</html>

CSS

4.标签选择器——根据标签名

<a href="002.html">链接1</a>
<a href="002.html">链接2</a>
<a href="002.html">链接3</a>
<a href="002.html">链接4</a>
<a href="002.html">链接5</a>
使用 <style> 标签在文档头部定义
a{
    color: darkblue;
}

5.CSS盒子
①所有HTML元素可以看作盒子，在CSS中，”box model”这一术语是用来设计和布局时使用。
②CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
③盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

下面的图片说明了盒子模型(Box Model)：
CSS
不同部分的说明：
Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

Border：一口气写法s
border:border-width border-style border-color
例如;border:2px solid red;
background-repeat: repeat; x轴y轴平铺
background-repeat: no-repeat; x轴y轴不平铺,图片只显示一次
background-repeat: repeat-x; 横向平铺

6.html表单：现实生活中填写的表格
表单元素：给所有可以填写的起一个统一的名字叫表单元素input
Input元素有多少种类型？22种
Html4:
1） input type=”text” 文本类型，输入原样显示
2） input type=”password ” 密码类型 输入会用替代文字隐藏（安全）
3） input type=”submit” 提交按钮，value值如果不输入，会根据浏览器语言类型自动补全提示。如果想手动改提示语用value属性
4） input type=”reset ” 重置按钮 value值如果不输入，会根据浏览器语言类型自动补全提示。如果想手动改提示语用value属性
5） input type=”radio” 单选按钮 多个选项中，你同时只能选中一个 用name属性来区分一组，value是它的真实值，checked 默认选中
6） input type=”checkbox” 复选框 可以多选用name属性来区分一组，value是它的真实值，checked 默认选中
7） 定义按钮 onclick响应单击事件 value提示语

相关标签： CSS

上一篇： PHP

下一篇： PHP 计算程序运行时间

推荐阅读