CSS

1 、eg

<head>

<style>

body{

background-color:#d0e4fe;}

h1{

color:orange;

text-alin：center;}
p{

font-family:"Times New Roman";

font-size:2opx;}

</style></head>

<body>

<h1>CSS实例</h1>

<p>这是一个段落</p>

</body>

2、采用CSS  修饰

<head><style>p{ color:red; text-align:center}</style></head>

<body> <p>HELLO  World</p></body

>

3 、ID选择器和class选择器

HTML中元素以ID属性来设置选择器，CSS中ID选择器一# 来定义

<style>

#paral{

text-align:center;

color:red;

}

</style>

<body><p id="paral">Hello world</p></body>

4、 class 选择器用于描述一组匀速的样式，class选择器有别于ID选择器，class可以在多个元素中使用，class 选择器在HTNL中以class属性表示，类选择器中以一个点号   .    表示

<style>

.center

{

text-align:center

}</style>

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

5、CSS样式分成三种分别是 外部样式External Style sheet，内部样式 internal style sheet，内联样式inline style当样式用于多个页面时，外部样式最理想的选择器， 在使外部样式的时候使用一个文件夹改变整个站点的外观，每个页面使用<link>标签链接到样式表。 <link>标签在文档头部

<head><link rel="stylesheet‘  type=‘text/css’’ href="mystyle.css">

6、背景设置的CSS

CSS背景属性的定义    background-color    background-image   background-repeat   background-attachment  bancground-position

在body 选择器中设置颜色      body{ background-color: #b0c4de;}   background-image 属性对背景图像进行平铺显示，覆盖整个元素实体<body>{   background-image:url('page.gif';)}

7、背景图像水平或者垂直平铺

水平方向平铺 body{

background-image;url('image.gif');

background-repeat:repeat-x;}   如果不设置平铺   no-repeat即可

设置具体位置  body{

background-repeat:no-repeat;

background-position:right top

}

8、简写方法   body{

background: #3ef322 url('image.png')  no-repeat right top;  margin-right:200px}

9、CSS文本格式

内联样式的字体样式设置

<style>

body{

color:red;}

h1{color:#00ff00ff;}

p.ex{color:rgb(244;33;33);}</style>

<body><h1>biaoti </h1>    <p>MKNf</p>    <p class="ex">mklmm</p></body>

10、文本的修饰

text-decoration 属性来设置或者删除文本的装饰    删除链接的下划线

<style> a{ text-decoration:none;}</style> <body><p >链接<a href="http://www.baidu.com/">链接</a>

11、文本转换

<style> p.uppercase{ text-transform:uppercase;}

p.lowercase{text-transform: lowercase;}

p.capitalize{ text-transform:capitalize;}

</style>

<body> <p class="uppercase">This is some text</p>

<p class="lowercase">This is some text</p>

</body>

12、文本缩进

<style>p{text-indent:50px;}</style>

<body> my    younger and more vulnerable years my father gave </body>

HTML&javaSkcript&CSS&jQuery&ajax-Css的更多相关文章

  1. HTML&javaSkcript&CSS&jQuery&ajax（八）

    一. <!DOCTYPE html><html><head><meta charset="utf-8"><tiitle> ...

  2. HTML&javaSkcript&CSS&jQuery&ajax（五）

    一.Framset标签定义了每个框架中的HTML文档, 1. <framset cols="25%,75%"> <frame src="frame_a. ...

  3. HTML&javaSkcript&CSS&jQuery&ajax（二）

    一.HTML 1.标签<a href="http:www.baidu.com">This is a link </a>         <img sr ...

  4. java-HTML&javaSkcript&CSS&jQuery&ajax

    CSS  伪装 1.<style>a;link{color:#000000} a:visited{color:#000000; a.:hover{color:#FF00FF} a:acti ...

  5. XSS-HTML&javaSkcript&CSS&jQuery&ajax

    1.设置不同的样式列表 <style> ul.a{list-style-tyrp:circle;}    ul.b{list-style-type:square;}   ul.c{list ...

  6. HTML&javaSkcript&CSS&jQuery&ajax（十）

    HTML 1.SVG直接嵌入HTML网页 ,SVG 是使用XML描述2D图像的语言,Canvas通过JavaScript来绘制2D <svg xmlns="http://www.w3. ...

  7. HTML&javaSkcript&CSS&jQuery&ajax（七）

    ’一.HTML5 实例  <video width="430" controls>   <source src="mov_nnn.mp4" t ...

  8. HTML&javaSkcript&CSS&jQuery&ajax（四）

    一.HTML创建响应设计 Responsive Web Design 可以改变尺寸传递网页,对于平板和移动设备是必须的 1.<!DOCTYPE html><html lang=&qu ...

  9. HTML&javaSkcript&CSS&jQuery&ajax（三）

    一.HTML块元素 1.块级元素 Block level element ,内联元素 inline element , HTML<div>元素属于块级元素,他是组合其他HTML元素的容器, ...

  10. java-HTML&javaSkcript&CSS&jQuery&ajax( 八)

    一.JavaScript教程笔记 1.在web页面中一般使用JavaScript脚本语言,支持跨平台,跨浏览器,驱动网页,与用户交互.另外Node.js把JavaScript引入到了服务器端. Jav ...

随机推荐

  1. Leetcode#53.Maximum Subarray（最大子序和）

    题目描述 给定一个序列(至少含有 1 个数),从该序列中寻找一个连续的子序列,使得子序列的和最大. 例如,给定序列 [-2,1,-3,4,-1,2,1,-5,4], 连续子序列 [4,-1,2,1] ...

  2. Maven 分模块，启动父工程时异常

    1.1 运行方式 Maven方式:命令的 方式1:运行父工程.父工程将各个子模块聚合到一起.将ssh-web打war包发布到tomcat 方式2:直接运行web工程 其他方式:传统的,   部署到to ...

  3. MySql cmd下的学习笔记 —— 引擎和事务（engine，transaction）

    engine 引擎就是MySQL存储数据的不同方式 myisam 插入速度快 支持全文索引 innoDB 插入速度慢 支持事务安全 假设两人同时购买火车票,两人同时看到只有一张火车票,几乎同时下单 或 ...

  4. POJ 1236 Network of Schools 连通图缩点

    题目大意:有向图连通图,第一问求至少需要多少个软件才能传输到所有学校,第二问求至少需要增加多少条路使其成为强连通图 题目思路:利用Tarjan算法经行缩点,第一问就是求缩点后入度为0的点的个数(特殊情 ...

  5. 为共享服务器配置Oracle数据库

    参考资料 https://docs.oracle.com/cd/E11882_01/server.112/e25494/manproc.htm#ADMIN00502

  6. Django 的系统时区设置 RPC

    PRC   Deprecated +08:00 +08:00 Link to Asia/Shanghai settings.py  文件的设置项:   TIME_ZONE = 'PRC'     来源 ...

  7. U盘文件系统格式

    u盘文件系统主要有FAT32.NTFS两种 ● FAT32文件系统 FAT32使用4个字节(也就是32位)的空间来表示每个扇区(Sector)配置文件的情形,故称之为FAT32.FAT16的分区容量上 ...

  8. Ubuntu 18.04使用sudo pip3报错

    在使用sudo pip3 install python库的时候出现如下警告: The directory '/home/lzhu/.cache/pip/http' or its parent dire ...

  9. IOT相关协议

    MQTT协议的入门 入门教程; 发布/订阅(Pub/Sub)模式,方便消息在传感器之间传递; 这意味着发布者和订阅者之间并不需要直接建立联系; 消息类型 MQTT拥有14种不同的消息类型: CONNE ...

  10. 清理messages提示-bash: /var/log/messages: Operation not permitted的处理

    报警提示系统盘容量不足了/var/log下查看messages日志已经很大了,所以就想着把messages清空一下,以此来释放空间.在删除的时候提示没有权限. 看了下日志,发现是大量的haproxy日 ...