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. Kubernetes 存储系统 Storage 介绍:PV,PVC,SC

    要求:先了解数据docker容器中数据卷的挂载等知识 参考网址: https://www.cnblogs.com/sanduzxcvbnm/p/13176938.html https://www.cn ...

  2. 阿里云下配置keepalive，利用HAVIP实现HA

    注:这篇文章参考网络,有些称呼都变了,比如阿里云上的现在是弹性ip 包括阿里云在内的很多云环境,因为不支持浮动IP广受诟病.目前阿里云在VPC网络下发布了HAVIP,能够实现arp宣告IP.这样也就让 ...

  3. Logstash：如何使用Elasticsearch，Logstash和Kibana管理Apache日志

  4. Jenkins和Gitlab CI/CD自动更新k8s中pod使用的镜像说明

    Jenkins 使用Jenkins的话,完成的工作主要有如下步骤: 1.从Gogs或Gitlab仓库上拉取代码 2.使用Maven编译代码,打包成jar文件 3.根据jar文件使用相对应的Docker ...

  5. 1-VSCode搭建GD32开发环境

    一.使用VSCode开发GD32的原因 1-单片机开发用的最多的IDE为Keil,而Keil为商用软件,并非开源,而且只支持windows环境,介于当前关系,有断供的风险在. 2-其他IDE类似第1条 ...

  6. 使用Pytorch进行多卡训练

    当一块GPU不够用时,我们就需要使用多卡进行并行训练.其中多卡并行可分为数据并行和模型并行.具体区别如下图所示: 由于模型并行比较少用,这里只对数据并行进行记录.对于pytorch,有两种方式可以进行 ...

  7. 动态代理(JDK、CGLIB)

    JDK-Proxy(动态代理): 特点:要求被代理的对象必须接口 缺点:如果一个对象没有任何接口实现,则不能使用JDK动态代理 1.创建一个Animal 提供一个方法 2.创建一个cat类.实现Ain ...

  8. Linux基础_5_文件管理

    创建 touch 文件名 #创建文件 stat 文件名 #查看文件属性 touch -am 文件名 #更改文件的访问时间及修改时间 删除 rm -rf s/* #递归强制删除s目录下的所有内容(包括文 ...

  9. java集合框架复习----（2）List

    文章目录 三.List集合 listIterator:迭代器 List实现类 1.泛型类 2.泛型接口 三.List集合 特点 有序,打印输出的顺序和添加时的顺序一致(不会帮你自动排序) 有下标,可以 ...

  10. 前端框架Vue------＞第三天学习（1）

    ` 文章目录 10 .组件基础 10.1 .什么是组件 11.什么是计算属性 10 .组件基础 10.1 .什么是组件 件是可复用的Vue实例,说白了就是一组可以重复使用的模板 <!DOCTYP ...