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. Ingress-nginx灰度发布功能详解

  2. Elasticsearch：反向代理及负载均衡在 Elasticsearch 中的应用

    文章转载自:https://elasticstack.blog.csdn.net/article/details/108365746

  3. ERP 系统最重要的是什么？

    ERP系统最重要的就是内部业务逻辑,这也是ERP复杂.专业性的体现!ERP系统可以算是当今最复杂的应用系统,也是最昂贵的,头部厂商一套系统动辄上千万,实施费用也常常达到千万级,实施周期动辄半年一年的, ...

  4. P7961 [NOIP2021] 数列 （DP 刷表法）

    (n<=30,是个多维的DP) v数组就是用来计算权值的,一共有m+1个.将S看做一个二进制数,按照题目S的定义,相当于在S的每一位可以随便+1(满足限制情况下),一共可以加n次. 我们来建立D ...

  5. 巧用VBA实现：基于多个关键词模糊匹配Excel多行数据

    在用Excel处理实际业务中,我们会碰到如下场景: 1.从一堆人名中找到包含某些关键字的名字: 2.从银行流水文件中根据[备注]字段找到包含某些关键字的,统一识别为[手续费业务]等. 这本质说的都是一 ...

  6. ASP.NET Core ：容器注入（二）：生命周期作用域与对象释放

    //瞬时生命周期 ServiceCollection services = new ServiceCollection(); services.AddTransient<TestServiceI ...

  7. 方法的重写(override / overwrite)

    1.重写:子类继承父类以后,可以对父类中同名同参数的方法,进行覆盖操作 2.应用:重写以后,当创建子类对象以后,通过子类对象调用子父类中的同名同参数的方法时,实际执行的是子类重写父类的方法. 重写的规 ...

  8. HNOI2008GT考试

    题目链接 考虑dp,f(i,j)表示做到了第i位(共n位),当前的后缀串与A1~Aj相匹配 接下来的方案数.转移的话枚举一个k=0~9表示这位选什么,如果选了以后,匹配的位置会改变到 j' ,j'可以 ...

  9. LeetCode------两数之和（3）【数组】

    来源:力扣(LeetCode) 链接:https://leetcode-cn.com/problems/two-sum 给定一个整数数组 nums 和一个整数目标值 target,请你在该数组中找出 ...

  10. C语言客房管理&酒店管理

    #include<iostream> #include<string.h> #include<stdlib.h> #include<iomanip> # ...