码迷,mamicode.com
首页 > Web开发 > 详细

常用css样式

时间:2017-10-01 00:26:36      阅读:249      评论:0      收藏:0      [点我收藏+]

标签:元素   ack   列表方法   语法   圆点   orm   式表   head   宽度   


1:
认识CSS
  1.1:css简介,css全称是层叠样式表,Cascading style sheets
  1.2:css的作用,主要是用于定义html内容在浏览器内的显示样式,如文字大小,颜色,字体加粗等
    使用css样式的一个好处是通过定义某个样式,可以让不同的网页位置的字体有着统一的字体,字号或者颜色等
  1.3:css代码语法
    css样式由选择器和声明组成,而声明又由属性和值组成
    h1 { color:red;font-size:14px;}
    选择器 属性 值{属性和值构成声明}
    选择器:指明网页中要应用样式规则的元素
    声明:在英文大括号"{}"中的就是声明,属性和值之间用英文冒号":"分割。当有多条声明时,中间可以英文分号":"分隔
    css注释代码
2:CSS基本知识(就近原则)
    2.1:内联式css样式,直接写在现有的html标签中
    2.2:嵌入式css样式,写在当前的文件中
    2.3:外部式css样式,写在单独的一个文件中,使用link引入
      css样式文件名以称以有意义的英文字母命名
      rel="stylesheet" type="text/css"是固定的写法,一定要写到link标签内不可修改
      语法格式(<link href="" rel="stylesheet" type="text/css">)
    <link>标签位置一般写在<head>标签之内
    2.4:优先级
      内联式>嵌入式>外部式

3:CSS选择器
  3.1:什么是选择器
   每一条css样式声明或者定义由两部分组成(选择器(样式))
  3.2:标签选择器
  3.3:类选择器
    《实际开发过程中使用类选择器最多》
    类选择器名称(css样式代码;)
  3.4:ID选择器
    为标签设置id="id名称",而不是class="类名称";
    ID选择符的前面是#号,而不是英文圆点(.);
   3.5:类和ID选择器的区别
    相同点:可以应用于任何元素
    不同点:(1)ID选择器只能在文档中使用一个,与类选择器不同,在一个HTML文档中,ID选择器只能使用一个,而且仅一次,而类选择器可以使用多次
     (2)可以使用类选择器词列表方法为一个元素同时设置多个样式,我们可以为一个元素同时设置多个样式,但只可以用类选择器的方法实现,id选择器是不可以的,不能使用id词列表
    ID选择器优先于类选择器
  3.6:子选择器
    还有一个比较有用的的选择器子选择器,即大于符号>,用来选择指定标签元素的第一代元素
  3.7:包含(后代)选择器
  包含选择器,即加入空格,用于选择指定标签元素下的后辈元素,如右侧代码编辑器中的代码。
  3.8:通用选择器(了解即可)
    *{color:red;}

*{margin:0;padding:0}//去掉页面样式 
  3.9:伪类选(一般用在链接的标签上面)
   伪类选择器:a:link正常连接的方式
    a:hover:鼠标放上去的样式
   a:active:选择链接时的样式
  a:visited:已经访问过的链接的样

4 常见属性 
  4.1:颜色
   color属性定义文本的颜色
   color:green;
    color:#ff6600;
    color:#f60;
    color:rgb(255,255,255);
    color:rgba(255,255,255,1);
  4.2:字体属性
    font-size:字体大小
    font-famliy:定义字体
    font-weight:字体加粗
  4.3:背景属性
  背景颜色:background-color;
    背景图片:background-image;
    背景重复:background-repeat;
    背景位置:background-position;
    简写方式:
  4.4:文本属性
    text-align:横向排列
    line-height:文本行高
      (1):%基于字体大小的百分比行高
      (2):数值来设置固定值
    text-indent:首行缩进
    letter-spacing:字符间距
    属性值:normal默认,length设置具体的数值,可以设置负数,inherit继承
   4.5:边框属性
    4.5.1:边框风格border-style;
    (1):统一风格(简写风格)border-style;
    (2):单独定义某一方向的边框样式
    border-bottom-style:下边框样式
    border-top-style:上边框样式
    border-left-style:左边框样式
   border-right-style:右边框样式
  (3):边框风格样式的属性值
    none:无边框
    solid:直线边框
    dashed:虚线边框
    dotted:点状边框
    double:双线边框
    groove:吐槽边框
    ridge:垄状边框
    inset inset边框
    outset outset边框
    inherit继承
    依托border-color的属性值
  4.5.2:边框颜色border-color;
  (1):统一风格(简写风格)
    border-color;
  (2):单独风格
    border-top-color:上边边框颜色
    border-bottom-color:下边边框颜色
    border-left-color:左边边框颜色
    border-right-color:右边边框颜色
  (3):属性值
    颜色值得名称:red,yellow;
    RGB:rgb(255,255,0,0.1)
    十六进制:#ff0,#ffff00;
  (4):属性值的四种方式
    一个值:border-color:(上,下,左,右)
    两个值:border-color:(上,下)(左,右)
    三个值:border-color:(上)(下,左)(右)
   四个值:border-color:(上)(下)(左)(右)

5 元素分类--块级元素

在html中<div>、 <p>、<h1>、<form>、<ul> 和 <li>就是块级元素。设置display:block就是将元素显示为块级元素。如下代码就是将内联元素a转换为块状元素,从而使a元素具有块状元素特点。

a{display:block;}

块级元素特点:

每个块级元素都从新的一行开始,并且其后的元素也另起一行。(真霸道,一个块级元素独占一行)

元素的高度、宽度、行高以及顶和底边距都可设置。

元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。

元素分类--内联元素

在html中,<span>、<a>、<label>、 <strong> 和<em>就是典型的内联元素(行内元素)(inline)元素。当然块状元素也可以通过代码display:inline将元素设置为内联元素。

内联元素特点:

和其他元素都在一行上;

元素的高度、宽度及顶部和底部边距不可设置;

元素的宽度就是它包含的文字或图片的宽度,不可改变。

元素分类--内联块状元素

内联块状元素(inline-block)就是同时具备内联元素、块状元素的特点,代码display:inline-block就是将元素设置为内联块状元素。(css2.1新增),<img>、<input>标签就是这种内联块状标签。

inline-block 元素特点:和其他元素都在一行上;

元素的高度、宽度、行高以及顶和底边距都可设置

 6  css的使用总结

水平居中的做法:

 (1)当被设置元素为 块级元素 时用 text-align:center 就不起作用了,这时也分两种情况:定宽块状元素和不定宽块状元素。

定宽块状元素:块状元素的宽度width为固定值

满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。

 

<body>

<div>我是定宽块状元素,哈哈,我要水平居中显示。</div>

</body>

css代码:

<div>tttttt<div>

<style>

div{

border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/

width:200px;/*定宽*/

margin:20px auto;/* margin-left 与 margin-right 设置为 auto */

}

</style>

(2) 不定宽的水平居中:

通过给父元素设置 float(float 可定义为left 和right 浮动后几个元素会出现在同行。有时候也可以用这个方法来实现显示在同一行中),然后给父元素设置 position:relative 和 left:50%,子元素设置 position:relative 和 left: -50% 来实现水平居中

 

 

常用css样式

标签:元素   ack   列表方法   语法   圆点   orm   式表   head   宽度   

原文地址:http://www.cnblogs.com/wwqqnn123456/p/7616479.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!