1 网页样式

1.1 引入方法

1.1.1内联样式

<标记名 style="样式属性：样式属性值；样式属性：样式属性值；·······"></标记名>

<div style="font-size:20px; line-height:30px; text-align:center: ">设置想要输入的文本</div>

1.1.2内部样式表

<style type = "text/csS">

选择符1{样式属性：样式属性值;样式属性：样式属性值…}

选择符2{样式属性：样式属性值；样式属性：样式属性值;…}

选择符3{样式属性：样式属性值；样式属性：样式属性值;⋯}

</style>


在<head>中引入<style>




<style>

hr {color:sienna;}

p {margin-left:20px;}

body {background-image:url("images/back40.gif");}

</style>

1.1.3链接外部样式

  1. rel=“styesheet”用来定义链接的文件与html之间的关系

  2. styesheet值表示指定一个固定或者首选的样式

  3. type="text/css"指文件的类型是样式表文本

  4. href="style.css"文件所在的位置

    <head>
    
    <link href="style.css" rel="stylesheet" type="text/css"
    
</head>

1.1.4导入外部样式

<style>

    @ import ulr("样式路径")

</style>

导入外部样式使用import方法，常用如下

@ import ulr("样式路径")；
@ import ulr(样式路径)；
@ import "样式路径"；
@ import ‘样式路径’；

1.2 基础语法

1.3 选择器的分类

1.3.1标记选择器

css

<style>

h1{

color:"red"

}

html

<h1>标签选择器使用</h1>

1.3.2通用选择器

  • 对所有元素都生效

  • 符号表示

*{

margin: 0;

padding: 0;

}

1.3.3 i d选择器

  1. id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式
  2. HTML元素以id属性来设置id选择器, CSS 中 id 选择器以 "#" 来定义。
  3. id名称是唯一的，只能对应于文档中一个具体的元素
<html>

<head>

<meta charset="utf-8">

<title>id选择器</title>

<style>

#para1{

	text-align:center;

	color:red;

}

</style>

</head>

<body>

<p id="para1">id选择的部分</p>

<p>这个段落不受该样式的影响。</p>

</body>

</html>

1.3.4类选择器

  • class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。
  • class 选择器在 HTML 中以 class 属性表示,
  • 在 CSS 中类选择器以一个点 . 号显示：
  • 在以下的例子中，所有拥有 center 类的 HTML 元素均为居中
  1. 所有的 p 元素使用 class="center" 让该元素的文本居中:
<style>

p.center{

	text-align:center;

}

</style>

<body>

<h1 class="center">这个标题不受影响</h1>

<p class="center">这个段落居中对齐。</p>

</body>

2.多个 class 选择器可以使用空格分开

<style>

.center {

	text-align:center;

}

.color {

	color:#ff0000;

}

</style>

<body>

<h1 class="center">标题居中</h1>

<p class="center color">段落居中，颜色为红色。</p>

</body>

1.3.5属性选择器

1.3.6后代选择器

E1 E2{属性1：属性值1;....}

<style type="text/css">

  ul a{

  color:red；

  }

</style>


<body>

     <ul>html:<a href="网址地址">html</a></li>

     <ul>css:<a href="网址地址">css</a></li>

     <ul>javaScript:<a href="网址地址">javaScript</a></li>

     </ul>

</body>

1.4 选择器优先级

1.5 css单位

1.6 给标签元素添加属性

2 网页基础样式添加

css网页布局设置总结的更多相关文章

  1. CSS网页布局错位:CSS宽度计算

    为什么计算宽度计算网页像素宽度是为了CSS网页布局整齐与兼容.常见的我们布局左右结构网页或使用padding.margin布局的时候将计算整页宽度,如果不计算无论是宽度过大过小就会出现错位问题. 怎么 ...

  2. 总结与学习DIV+CSS网页布局技巧

    以前用表格布局时设置网页居中非常方便,把表格对齐方式设置为居中就行了,就这么简单,现在呢,用DIV+CSS样式表控制,好像不是那么容易了,其实也很简单,只不过方式不同而已. <style> ...

  3. 简单实用的CSS网页布局中文排版技巧

    由于汉字的特殊性,在css网页布局中,中文排版有别于英文排版.排版是一个麻烦的问题,小编认为,作为一个优秀的网页设计师和网页制作人员,掌握一些简单的中文排版技巧是不可或缺的,所以今天特意总结了几个简单 ...

  4. CSS网页布局中易犯的30个小错误

    即使是CSS高手,也难免在书写CSS代码的时候出一些小错误,或者说,任何一种代码都是如此.小错误却往往造成大问题,浪费很多无辜的时间来调试和排错.查看下面这份CSS网页布局中易犯的10个小错误,努力的 ...

  5. 前端学习笔记之CSS网页布局

    CSS网页布局   阅读目录 一 网页布局方式 二 标准流 三 浮动流 四 定位流 一 网页布局方式 #1.什么是网页布局方式 布局可以理解为排版,我们所熟知的文本编辑类工具都有自己的排版方式,比如w ...

  6. 项目实践2:项目中的CSS网页布局(常用)

    好家伙, 整个网页做下来,最主要的,自然是css的网页布局(菜鸟好用啊) 我需要一个大概这样的布局: 然后上代码: <!DOCTYPE html> <html> <hea ...

  7. CSS网页布局全精通

    在本文中将使用四种常见的做法,结合CSS于结构化标记语法制作两栏布局.很快地就会发现,不用嵌套表格,间隔用的GIF也能做出分栏版面布局. 相关文章:CSS网页布局开发小技巧24则 稍后在"技 ...

  8. 《精通CSS网页布局》读书报告 ----2016-12-5补充

    第一章:CSS布局基础 1.CSS的精髓是布局,而不是样式哦!  (定要好好的研究布局哦,尤其配合html5) 2. html标签的语义性,要好好的看看哦! 3.DTD:文档类型定义. 4.内联--& ...

  9. 深入理解CSS网页布局-理论篇

    在CSS网页开发布局中,需要对浮动和定位有深刻的理解才能在开发中游刃有余. 基于此,在博客园中做了本篇总结,这些总结来自实践经验和阅读一些书籍后的理解总结,主要内容为浮动,清除浮动,定位. (可点击屏 ...

  10. DIV+CSS 网页布局之：混合布局

    1.混合布局 在了解了一列.两列和三列布局之后,混合布局也就不难理解了,混合布局也可以叫综合型布局,那么混合布局就可以在一列布局的基础之上,分为两列布局,三列布局,网页布局的结构普遍都是三列布局,但是 ...

随机推荐

  1. 云原生之旅 - 3）Terraform - Create and Maintain Infrastructure as Code

    前言 工欲善其事,必先利其器.本篇文章我们介绍下 Terraform,为后续创建各种云资源做准备,比如Kubernetes 关键词:IaC, Infrastructure as Code, Terra ...

  2. 小程序 AI/AR 能力

    一.关于 VisionKit 1.定义 VisionKit 为小程序提供了开发 AR 功能的能力,包含了 AR 在内的视觉算法. 2.版本 提供了 V1 和 V2 两个版本,区别如下: V1平面接口, ...

  3. SpringSecurity基本使用

    SpringSecurity web 安全管理框架 需要依赖多 shiro 轻量 SSM+Shiro SpringBoot/SpringCloud+SpringSecurity 配置用户名密码 配置文 ...

  4. CentOS7 系统服务器初始化配置、安全加固、内核升级优化常用软件安装的Shell脚本分享

    转载自:https://www.bilibili.com/read/cv13875630?spm_id_from=333.999.0.0 描述: 适用于企业内部 CentOS7 系列操作服务器初始化. ...

  5. Solutions：网站搜索 - Elastic Site Search

  6. 矩阵顺时针打印（C++）（？ 为什么不能AC，9度1391）

    #include <iostream> #include <fstream> using namespace std; int a[1000][1000]; void prin ...

  7. Mybatis PageHelper 使用的注意事项

    什么时候会导致不安全的分页? PageHelper 方法使用了静态的 ThreadLocal 参数,分页参数和线程是绑定的. 只要你可以保证在 PageHelper 方法调用后紧跟 MyBatis 查 ...

  8. 一键体验 Istio

    背景介绍 Istio 是一种服务网格,是一种现代化的服务网络层,它提供了一种透明.独立于语言的方法,以灵活且轻松地实现应用网络功能自动化.它是一种管理构成云原生应用的不同微服务的常用解决方案.Isti ...

  9. LeetCode------合并两个有序数组（4）【数组】

    来源:力扣(LeetCode) 链接:https://leetcode-cn.com/problems/merge-sorted-array 1.题目 给你两个按 非递减顺序 排列的整数数组 nums ...

  10. .net core 配置跨域

    使用场景: 由于浏览器的同源策略,即浏览器的安全功能,同源策略会阻止一个域的js脚本和另一个域的内容进行交互. 会出现以下报错: 怎样属于非同源呢? 协议.域名.端口号只要有一个不相同就是属于非同源 ...