W3.css General Description # Part1

Discussion in 'Web Programming' started by fajolesi, Apr 11, 2018.

  1. fajolesi

    fajolesi New Member

    Hello Friends,

    We Know A lot of people in the forum know Web Design, It Works Very Nice. The Close Scripting Club is Opened,

    Now Showing Their Skills in Web Design Space Now I will try to show you how to use Css's best-looking personality without opening SASS and LCSS Topics.

    I will talk about w3 Css, I Continuous Us. For Professional Jobs After SASS.

    You will not be able to do it with Css or you will come up with "What Happened to Jews?" Many of your friends save you this w3 Css ... Let's go into the subject without extending too long.

    Firstly we need a * .css file to call our Ready Style Blocks.

    Whether you are exporting to this project from outside


    Code:
    <link rel = "stylesheet" href = "https://www.w3schools.com/w3css/4/w3.css">
    If you want to, right-click this Linke, click Save As and send it to this form

    Code:
    <link rel = "stylesheet" href = "/classerrismi/w3.css">
    Once you have done the import process, you will do the only thing to read the below-mentioned Konuyu, Konuyu To use the areas that will work for you ....

    Colors

    Background Colors;
    w3 Css, offers us the most used and most eye-catching adverts to match the Css3'de together in the form of color according to the pleasure of the color selection.

    To Use Examples;

    Code:
    <div style = "background-color: red;"> </ div>
    We are finishing this job by adding a class name like Underneath, instead of trying to make a long long background with Style.

    Code:
    <div class = "w3-red"> </ div>
    Font Colors;
    As you change the font Rich


    Code:
    <div style = "color: red;">
    Who would you like to write this? Tabiki We are doing business with a short name like Not Ozaman Sub.

    Code:
    <div class = "w3-text-red">


    Hover Colors;

    You know that Hover is absolutely crucial for professional business people, but it is something that we need to give importance to visuality in small business. Yes As You Think ...'

    Code:
    div: hover {
        background-color: red;
    }
    Who will write this? Even when I'm writing here, I am Sue, and I am used to writing this person who is constantly doing the project ... But I think if I do it as the bottom

    Code:
    <div class = "w3-container w3-blue w3-hover-red">


    And also the Thoughtful Makers, Text Hover Like You Know. I have never used it personally since I was cold. But again, as you have guessed, they came from the top of the class with the name.


    Code:
    <div class = "w3-container w3-blue w3-hover-text-red">
    Panel

    Panel Class;
    Paneller What Do We Do for Us? Panels are usually used to look decorative, there is a good shape for the same purpose here.

    A Normal Panel


    Code:
    <div class = "w3-panel w3-red">
      <p> I'm a Panelist. </ p>
    </ Div>
    Pale Backdrop Panel

    Code:
    <div class = "w3-panel w3-pale-red">
        <p> I'm a Panelist. </ p>
      </ Div>
    Quote Panel

    This class name that saves us from CMS at least for 30 minutes is also very useful for us. It is a panel which is generally used for the quotations and the design is nice.


    Code:
    <div class = "w3-panel w3-leftbar w3-sand w3-xxlarge w3-serif">
      <p> <i> "Justice is the foundation of property." </ i> </ p>
    </ Div>
    What Is The Panel As The Card What Is The Panel As The Board What Is The Panel That Is Actually On The Shaded Page. We have a class name that saves us from this shadowing, that is BoxShadow ...

    Code:
    <div class = "w3-panel w3-blue w3-card-4">
      <P> Turkey's most populous city is Istanbul, Current population is 15.03 million </ p>
    </ Div>
    Closeable Panels Can be Closed

    as You See in the Picture For the Panels Below You can hide the panel by pressing X at the bottom of the code block.


    Code:
    <div class = "w3-panel w3-red w3-display-container">
      <span onclick = "this.parentElement.style.display = 'none'"
      class = "w3-button w3-red w3-large w3-display-topright"> x </ span>
      <p> Click on the X to close this panel. </ p>
     
    </ Div>
    We can show
    Panels via Panel Display Button. When You Use Codes That Will Be Like A Picture ...


    Code:
    style.display = 'block' "> Show Panels </ button> <button class =" w3-button w3-red "onclick =" docu ment.getElementById ('id01'
    
    <div id = "id01" class = "w3-panel w3-green w3-display-container" style = "display:
      <span onclick = "this.parentElement.style.display = 'none'"
      class = "w3-button w3-red w3-display-topright"> x </ span>
      <p> Press X to close the panel </ p>
     
    </ Div>
    Use of Borders

    Border has revealed a lot of things to lighten our work w3 For Us ...


    Code:
     <div class = "w3-panel w3-border">
        <p> 4 sides Off </ p>
      </ Div>
     
      <div class = "w3-panel w3-border-left">
        <p> Left Off </ p>
      </ Div>
     
      <div class = "w3-panel w3-border-right">
        <p> Right Off </ p>
      </ Div>
     
      <div class = "w3-panel w3-border-top w3-border-bottom">
        <p> Bottom and Bottom Off </ p>
      </ Div>

    Border Coloring

    Code:
    <div class = "w3-panel w3-border w3-border-red">
        <p> 3 Side Off Red </ p>
      </ Div>
    
      <div class = "w3-panel w3-border-left w3-border-blue">
        <p> Left Side Off Blue </ p>
      </ Div>
    
      <div class = "w3-panel w3-border-top w3-border-bottom w3-border-green">
        <p> Up & Down Off Green </ p>
      </ Div>
    
      <div class = "w3-panel w3-border-left w3-pale-red w3-border-red">
        <p> Left Side Off, Red. Background Pale Red </ p>
      </ Div>

    Rounded Borders


    "Border-radius:" Without distracting the class name we can get the degree we want with the corners.

    Code:
    <div class = "w3-panel w3-border">
        <p> normal </ p>
      </ Div>
     
      <div class = "w3-panel w3-border w3-round-small">
       <P> small </ p>
      </ Div>
     
      <div class = "w3-panel w3-border w3-round">
        <P> Standard </ p>
      </ Div>
    
      <div class = "w3-panel w3-border w3-round-large">
        <P> large </ p>
      </ Div>
    
      <div class = "w3-panel w3-border w3-round-xlarge">
        <p> xlarge </ p>
      </ Div>
    
      <div class = "w3-panel w3-border w3-round-xxlarge">
        <P> XXLarge </ p>
      </ Div>
    Thick Borders

    Code:
    <div class = "w3-panel w3-light-gray w3-leftbar">
        <p> Thick Left Border Color Colored </ p>
      </ Div>
     
      <div class = "w3-panel w3-light-gray w3-leftbar w3-border-gray">
        <p> Bold Left (Background Colored) Border Color Colored </ p>
      </ Div>
     
     <div class = "w3-panel w3-leftbar w3-border-blue">
        <p> Left Bold Border Only </ p>
      </ Div>
     
      <div class = "w3-panel w3-leftbar w3-border-blue w3-text-blue">
        <p> Font Colored Bold Left Border </ p>
      </ Div>
    
      <div class = "w3-panel w3-leftbar w3-border-red">
        <p> Red Left Border Text Color Default </ p>
      </ Div>
     
      <div class = "w3-panel w3-borderbar w3-border-red w3-text-red">
        <p> Red Left Border Text Colored Red </ p>
      </ Div>
    
      <div class = "w3-panel w3-leftbar w3-border-blue w3-pale-blue">
        <p> Blue Left Bold Border Pale Blue Background Default Text Color </ p>
      </ Div>
     
      <div class = "w3-panel w3-topbar w3-bottombar w3-border-red w3-pale-red">
        <p> Top and Bottom Bold Red Border Background Pale Red Text Color Default </ p>
      </ Div>
    
      <div class = "w3-panel w3-leftbar w3-border-green">
        <p> Left Bold Green Color Border Default font Color </ p>
      </ Div>
     
      <div class = "w3-panel w3-leftbar w3-border-green w3-text-green">
        <p> Left Bold Green Border Color Green text Color </ p>
      </ Div>
    
      <div class = "w3-panel w3-leftbar w3-border-yellow">
        <p> Left Thick Yellow Colored Border Default font Color </ p>
      </ Div>
     
      <div class = "w3-panel w3-borderbar w3-border-yellow w3-text-yellow">
        <p> Left Thick Yellow Colored Border Yellow text color </ p>
      </ Div>
    Borders Hover

    Yes, Even Hover Event for Borders Has Been Considered ...


    Code:
    <div class = "w3-panel w3-border w3-hover-border-red">
        <p> Come Over </ p>
      </ Div>
     
      <div class = "w3-panel w3-border w3-border-red w3-hover-border-green">
        <p> Come Over </ p>
      </ Div>
    Code:
    <div class = "w3-panel w3-leftbar w3-border-white w3-hover-border-green">
        <p> Thick Left Border Hover </ p>
      </ Div>
    
      <div class = "w3-panel w3-light-gray w3-bottombar w3-border-white w3-hover-border-green">
        <p> Thick Bottom Border Hover </ p>
      </ Div>
    Fonts

    Font Size


    Code:
    <p class = "w3-tiny"> w3-tiny </ p>
      <p class = "w3-small"> w3-small </ p>
      <p class = "w3-medium"> w3-medium (Default) </ p>
      <p class = "w3-large"> w3-large </ p>
      <p class = "w3-xlarge"> w3-xlarge </ p>
      <p class = "w3-xxlarge"> w3-xxlarge </ p>
      <p class = "w3-xxxlarge"> w3-xxxlarge </ p>
      <p class = "w3-jumbo"> w3-jumbo </ p>
    Text Alignment


    Code:
    <div class = "w3-container w3-border w3-large">
        <p> Left-aligned Text </ p> </ div> <p class = "w3-left-
        <p> Right-aligned text </ p> </ div> <p class = "w3-right-
      </ Div>
    Font Opacity

    Code:
    <div class = "w3-panel w3-blue">
        <h2 class = "w3-opacity"> Text Opacity </ h2>
      </ Div>
    Text Shading

    Code:
    <div class = "w3-container w3-blue">
      <h2 style = "text-shadow: 1px 1px 0 # 444"> Text Shadow </ h2>
    </ Div>
     

Share This Page