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. SDN实验环境安装配置

  2. Pod 使用进阶

    静态 Pod 在 Kubernetes 集群中除了我们经常使用到的普通的 Pod 外,还有一种特殊的 Pod,叫做Static Pod,也就是我们说的静态 Pod,静态 Pod 有什么特殊的地方呢? ...

  3. nacos基础知识理解

    概念 Nacos是阿里巴巴开源的一款支持服务注册与发现,配置管理以及微服务管理的组件.用来取代以前常用的注册中心(zookeeper , eureka等等),以及配置中心(spring cloud c ...

  4. 通过nginx转发rabbitmq访问手动添加队列的时候报错：Management API returned status code 405

    原因: 正常访问该地址:https://xxx.xxx.com/rabbitmq/ 时能正常跳转,但是 rabbitmq management 的 API url 出现了 %2f 字符,这些字符会在经 ...

  5. gitlab cicd流水线语法

    流水线语法有哪些? 流水线参数列表 Keyword Description script 运行的Shell命令或脚本. image 使用docker映像. services 使用docker服务映像. ...

  6. 关闭You have new mail in /var/spool/mail/root提醒

    echo "unset MAILCHECK">> /etc/profile #以root权限执行 或者用sudo source /etc/profile cat /de ...

  7. 7_Log

    一. 引言 1.1 日志介绍 用于记录系统中发生的各种事件. 记录的位置常见的有: 控制台, 磁盘文件等 1.2 日志级别 日志级别由低到高 TRACE, DEBUG, INFO, WARN, ERR ...

  8. ToroiseGit/GitBash 设置提交信息模板设置

    一.背景:当使用git提交代码时,每次的提交信息固定,却又比较长不好记的时,还需要将模板的地址保存下来,如果能设置一个固定的模板就可以很好的解决这个问题. 提交前的提交信息需要手动输入: 二.Toro ...

  9. img通过修改css等比例缩小图片

    css中加上:object-fit:cover 例子: img{ width: 200px; height: 400px; object-fit: cover; }

  10. .Net CLR异常简析

    楔子 前面一篇研究了下C++异常的,这篇来看下,CLR的异常内存模型,实际上都是一个模型,承继自windows异常处理机制.不同的是,有VC编译器(vcruntime.dll)接管的部分,被CLR里面 ...