css概述、css样式表分类、选择器分类、css基础样式

1 . 样式表  Cascading Style Sheet

css优势:

  • 内容与表现分离
  • 网页的表现统一,容易修改
  • 丰富的样式,使网页布局更加灵活
  • 减少网页代码量,增加网页的浏览速度,节省网络带宽
  • 使用独立于网页的CSS,有利于网页被搜索引擎收录
  • 嵌入ID>外部ID>嵌入class>外部class>嵌入标签>外部标签

    1.1  引入方式

四种

  • style=""  行内样式表
  • <style>   内部样式表
  • <link rel="stylesheet"  href="" />  外部样式表  (使用最多)
  • <style>@import ""</style>  导入方式,尽量不要使用!!!

1.2  引入方式优先级

行内>内部>外部>导入

1.3  链接式和导入式的区别:

  • <link/>标签属于XHTML,@import属于CSS2.1;
  • 使用<link/>链接的CSS文件先加载到网页当中,再进行编译显示;
  • 使用@import导入的CSS文件,客户端显示HTML结构,再把CSS文件加载到网页中;
  • @import是CSS2.1特有的,对于不兼容CSS2.1的浏览器来说就是无效的;

2.  选择器

2.1 哪几种选择器和它的优先级

ID选择器  #   一个HTML文档中只能有一个相同名字的ID

CLASS选择器  .  可以有多个

元素    p

通配符  *

2.2 选择器的优先级

ID > CLASS > 元素 > *

3 . 基本的几个样式(常用于文本,图片,列表)

background背景
    1.background-color  背景色  (16进制数  rgb  rgba  英文名)
    2.background-image 背景图
    3.background-size 背景大小 (像素、百分比)
    4.background-repeat  (repeat-x  repeat-y  no-repeat)
    5.background-position  (通过方向值来指定,通过百分比指定,通过确切的像素值指定)
    6.background-attachment  是否随着浏览器滚动,使用它图片会相对浏览器固定住(bg-position和bg-attachment不要一起使用)
    7.background复合属性  可以把之前的属性定义在这一个里面,【一般书写顺序:颜色、图片、是否重复、是否固定、位置】

color颜色

  1. color  规定文本的颜色
  2. opacity  设置元素的透明度  ,1不透明   0完全透明

font字体

  1. font-style 指定文本的字体样式(正常、斜体
  2. font-variant 指定文本是否为小型的大写字母(对英文起作用)
  3. font-weight 指定文字的粗细(只有两种样式)  bold  粗体
  4. font-size 指定文本字体大小
  5. font-family 定义文本使用某个字体

中文字体font-family常用列表http://www.cnblogs.com/jihua/p/cnfont.html

 font 复合属性

   一般顺序:字体样式、是否为小号大写字、字体粗细、字号、字体

 

text文本属性

color , text-align , line-height ,  letter-spacing , vertical-align ,text-indent ,text-decoration ;

-----【vertical-align----->1. 常用于文本框input ,2. 结合{display:table-cell;}可用于将图片垂直居中 】

-----【valign----->只适用于table中的单元格,例如<td valign=‘top‘ height=‘100px‘>this is cell</td> 】

-----【align----->适用于<hr/>,例如:<hr align="right" width="200" size="20" color="pink"/> ;

         <table>,例如:<table border="1" width="300" align="center">······</table> ;

         <img/>,例如:<img src="ika.jpg" align="top" /> <span>文本相对于图片顶部显示 </span> ;

         ·····等等,不再一一列举;】

<------学习笔记,如有错误,谢谢指正!------->

时间: 2024-10-26 10:34:12

css概述、css样式表分类、选择器分类、css基础样式的相关文章

样式表(选择器))(样式)

一.选择器(样式表用来选取元素的) .标签:根据标签名选取元素 .class(.点)(根据class名来选取元素) .id(#井号)(根据id名来筛选出唯一元素) .复合:(逗号并列div,span)(空格后代#list li)(点筛选div·s) 二.样式 1.大小(width宽度)(height高度) 2.背景(background-color:背景颜色)(background-image:背景图片)(background-repeat:背景图的平铺方式)(background-positi

css样式表的选择器与分类

css 样式表的作用: 主要用于结构,样式与行为,CSS主要的作用就是美化网页的一个语言,它的特点: 1.结构与样式分离的方式,便于后期维护与改版; 2.样式定义精确到像素的级别; css样式表的结构:CSS 称为层叠样式表 用于给网页设置各种样式 css样式的语法由3部分组成,选择器,属性和值. css的分类:主要分: 内联,内嵌,与外联. 内联: 写在标签里, 控制精准,代码重复性差,优先级最高. 内嵌: 嵌在页面head里面,控制没有内联的精准,代码重复性好. 外联: 单独的样式文件,引入

前端学习(9)~css学习(三):样式表和选择器

本文主要内容 CSS概述 CSS和HTML结合的三种方式:行内样式表.内嵌样式表.外部样式表 CSS四种基本选择器:标签选择器.类选择器.ID选择器.通用选择器 CSS几种扩展选择器:后代选择器.交集选择器.并集选择器 CSS样式优先级 CSS 概述 CSS:Cascading Style Sheet,层叠样式表.CSS的作用就是给HTML页面标签添加各种样式,定义网页的显示效果.简单一句话:CSS将网页内容和显示样式进行分离,提高了显示功能. css的最新版本是css3,我们目前学习的是css

CSS入门(css简介与样式汇总、CSS的使用方式、CSS样式表的特征、CSS基础选择器和复杂选择器、边框阴影)

一.CSS的作用 1.以统一的方式实现样式的定义 2.提高页面样式的可重用性和可维护性 3.实现了内容(HTML)和表示(CSS)的分离 HTML和CSS之间有什么关系? HTML:构建网页的结构 CSS :构建HTML元素的样式 样式汇总: color:red 字体颜色 font-size:字体大小 font-family:字体样式 background-color 背景颜色 width:宽度 height:高度 字体使用实例(样式) font-family:字体的种类 font-size:字

Java开发桌面程序学习(十)——css样式表使用以及Button悬浮改变样式实现

css样式表使用 javafx中的css样式,与html的有些不一样,javafx中的css,是以-fx-background-color这种样子的,具体可以参考文档JavaFx css官方文档 javafx中,css样式有两种使用方法 直接在fxml中使用 fxml引用css文件 fxml直接使用样式 在某个控件中使用style属性即可 <Text layoutX="235.0" layoutY="173.0" style="-fx-backgro

0322css样式表,选择器

Css样式表 内联样式表:<p style="font-size:14px;">内联样式表</p> 内嵌样式表:必须写在head标签里面. <style type="text/css"> p   //格式对p标签起作用 { 样式: } </style> 外部样式表: 新建一个CSS文件,用来放置样式表.如果要在HTML文件中调用样式表,需要在HTML文件中点右键→CSS样式表→附加样式表.一般用link连接方式. 例如

html部分---样式表,选择器;

<1.内联样式,优点:控制精确,缺点:代码重用性差,页面代码乱.> <div style="background-color:#0F0"></div> <2.内嵌样式,优点:代码重用性好.缺点:控制不精确,写在<head>标签里面> <style type="text/css"> *{ color:#0F3 }<!--*代表给所有内容改样式--> </style> <

Html 初识样式表&amp;选择器

样式表&类选择器分类 样式表分类: 1.内联式样式表:在标签内部写样式代码,精确但不方便,增加工作量,后期修改麻烦. 2.嵌入式样式表:一般写在head内 以<style>......</style>方式可以控制整个页面内的某个标签样式. 3.外联式样式表:单独将样式表定义成一个css文件,然后在css文件中调节页面样式                             一般会在head标签内写一句:<link type="text/css"

css样式表---样式表分类、选择器

一.样式表分三类: 1.内联样式表.——放在元素的开始标记中.——只对当前元素起作用.<input name="txt" style="border:0px; border-bottom:1px solid black;" type="text" /> 例: 结果: 2.内嵌样式表.——放在页面的<head></head>中间.——可以对整个页面. <head> <meta http-equi