CASA ȘTIINȚEI
CASA ȘTIINȚEI este locul unde diverse subiecte sunt dezbătute și scrise.
|
Lista Forumurilor Pe Tematici
|
CASA ȘTIINȚEI | Inregistrare | Login
POZE CASA ȘTIINȚEI
Nu sunteti logat.
|
Nou pe simpatie:
Profil Mamae
 | Femeie
19 ani
Constanta
cauta Barbat
26 - 54 ani |
|
blurex
Învățăcel
 Inregistrat: acum 8 ani
Postari: 97
|
|
Sursa:
CSS se pune in <head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
sau
<p style="color:black; font-size: 55px;">text</p>
p.blue, h1, h2, .clasagenerala
{
color: blue;
text-align: center;
background-image: url);
font-size: 25px;
font-family: Verdana, Arial, Geneva, Arial Black;
font-weight: lighter; <!--light, bold, bolder-->
font-style: oblique;
text-decoration: overline underline;
line-height: 1.5em;
}
#paragrafspecial
{
color: green;
}
<p class="clasagenerala">text</p>
<p id="paragrafspecial">alttext</p>
<span> este ca un <div> ce se aplica pe elemente mai restranse
Pseudoclasa face efect special atunci cand facem hover sau dam click pe un link
a:link
{
color: blue;
}
a:visited
{
color: #8C8c9D;
}
a:hover
{
color: #F15A51;
}
Sixteen Predefined Colors in HTML
Note that the color names and hex values are not case-sensitive, not even in XHTML.
aqua #00FFFF
black #000000
blue #0000FF
fuchsia #FF00FF
gray #808080
green #008000
lime #00FF00
maroon #800000
navy #000080
olive #808000
purple #800080
red #FF0000
silver #C0C0C0
teal #008080
white #FFFFFF
yellow #FFFF00
Color matching websites:
position: absolute; //face elementul sa nu tina cont de positia celorlalte
position: fixed; //face positia fixa chiar si atunci cand faci scroll, aka ads
float: left;
width: 250px; //respecta pozitia celorlalte elemente dar le pune in pozitia respectiva
height: 120px;
overflow: scroll; //cand textul trece peste limita admisa, creeaza un scrollbar
a: hover {
cursor: crosshair
}
CURSOR PROPERTY VALUES:
alias The cursor indicates an alias of something is to be created
all-scroll The cursor indicates that something can be scrolled in any direction
auto Default. The browser sets a cursor
cell The cursor indicates that a cell (or set of cells) may be selected
context-menu The cursor indicates that a context-menu is available
col-resize The cursor indicates that the column can be resized horizontally
copy The cursor indicates something is to be copied
crosshair The cursor render as a crosshair
default The default cursor
e-resize The cursor indicates that an edge of a box is to be moved right (east)
ew-resize Indicates a bidirectional resize cursor
grab The cursor indicates that something can be grabbed
grabbing The cursor indicates that something can be grabbed
help The cursor indicates that help is available
move The cursor indicates something is to be moved
n-resize The cursor indicates that an edge of a box is to be moved up (north)
ne-resize The cursor indicates that an edge of a box is to be moved up and right (north/east)
nesw-resize Indicates a bidirectional resize cursor
ns-resize Indicates a bidirectional resize cursor
nw-resize The cursor indicates that an edge of a box is to be moved up and left (north/west)
nwse-resize Indicates a bidirectional resize cursor
no-drop The cursor indicates that the dragged item cannot be dropped here
none No cursor is rendered for the element
not-allowed The cursor indicates that the requested action will not be executed
pointer The cursor is a pointer and indicates a link
progress The cursor indicates that the program is busy (in progress)
row-resize The cursor indicates that the row can be resized vertically
s-resize The cursor indicates that an edge of a box is to be moved down (south)
se-resize The cursor indicates that an edge of a box is to be moved down and right (south/east)
sw-resize The cursor indicates that an edge of a box is to be moved down and left (south/west)
text The cursor indicates text that may be selected
URL A comma separated list of URLs to custom cursors. Note: Always specify a generic cursor at the end of the list, in case none of the URL-defined cursors can be used ("exemplu.ico"), default
vertical-text The cursor indicates vertical-text that may be selected
w-resize The cursor indicates that an edge of a box is to be moved left (west)
wait The cursor indicates that the program is busy
zoom-in The cursor indicates that something can be zoomed in
zoom-out The cursor indicates that something can be zoomed out
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit
.image
{
float:left;
margin-right: 10px;
margin-bottom: 300px;
}
<p> <img class="image" src="caesar.jpg"/>TEXT</p> //pune imagine frumos aliniata in text
position: static; //defaultul, statica
position: relative; //nonstatica, determinanata de primul element static
position: absolute; //nonstatica determinata de primul element nonstatic
.test {
background-color: yellow;
height: 50px;
display: inline-block; |sau| display: inline; |sau| display: block;
}
Modificat de blurex (acum 8 ani)
|
|
| pus acum 8 ani |
|
blurex
Învățăcel
Inregistrat: acum 8 ani
Postari: 97
|
|
Vertical Menu
<ul>
<li><a href="">Home</a></li>
<li><a href="">Links</a></li>
<li><a href="">Forum</a></li>
<li><a href="">About</a></li>
</ul>
ul
{
list-style: none; //scos bulletstyle
padding: 0; //scos
margin: 0; //scos si el pentru a anula setarile default de la <ul>
}
ul li a
{
text-decoration: none;
font-family: Georgia, "Times New Roman", Times, serif;
background-color: #5c755e;
color: white;
<div id="nav">
<ul>
<li><a href="">Home</a></li>
<li><a href="">Links</a></li>
<li><a href="">Forums</a></li>
<li><a href="">Contact</a></li>
</ul>
</div>
#nav
{
background-color: darkgreen;
height: 35px;
font-size: 25px;
font-weight:bold;
font:Tahoma;
}
#nav ul
{
padding: 0;
margin: 0;
list-style-type: none;
text-align: center;
}
#nav li
{
display: inline;
padding:15px;
vertical-align:middle;
}
#nav a
{
text-decoration:none;
padding: 8px 8px 8px 8px;
color: white;
vertical-align:middle
}
#nav a:hover
{
color: black;
background-color:white;
}
display: block;
width: 80px;
margin:5px;
padding: 10px;
border: 1px solid red;
border-radius: 2px;
text-align: center;
height:25px;
line-height: 25px;
}
ul li a:hover
{
background-color: #d3d3d3;
color: black;
}
______________
Horizontal Menu
<div id="nav">
<ul>
<li><a href="">Home</a></li>
<li><a href="">Links</a></li>
<li><a href="">Forums</a></li>
<li><a href="">Contact</a></li>
</ul>
</div>
#nav
{
background-color: darkgreen;
height: 35px;
font-size: 25px;
font-weight:bold;
font:Tahoma;
}
#nav ul
{
padding: 0;
margin: 0;
list-style-type: none;
text-align: center;
}
#nav li
{
display: inline;
padding:15px;
vertical-align:middle;
}
#nav a
{
text-decoration:none;
padding: 8px 8px 8px 8px;
color: white;
vertical-align:middle
}
#nav a:hover
{
color: black;
background-color:white;
}
___________
A nice button
<ul>
<li><a class="button" href="">Home</a></li>
<li><a class="button" href="">Links</a></li>
<li><a class="button" href="">Forum</a></li>
<li><a class="button" href="">Contact</a></li>
</ul>
.button {
background: #e7e7e7;
border: 1px solid;
border-radius: 3px;
font: 700 13px Helvetica,Arial;
height: 30px;
line-height: 28px;
padding: 0 20px;
text-align: center;
margin-right: 10px;
box-sizing: border-box;
}
ul {
padding: 0;
list-style-type: none;
}
li {
display:inline;
}
a {
color: #666;
text-decoration: none;
float: left;
}
a:hover {
color: #000;
background-color: #dadada;
}
Modificat de blurex (acum 8 ani)
|
|
| pus acum 8 ani |
|
blurex
Învățăcel
Inregistrat: acum 8 ani
Postari: 97
|
|
Web Form
<h2>Fill out the form below and click “order now” to order</h2>
<form id="theForm" action="" method="">
<p>
<div class="row">
<label for="name">Name:</label>
<input type="text" id="name" name=""> </br> </br>
</div>
<div class="row">
<label for="address">Address:</label>
<input type="text" id="address" name=""> </br> </br>
</div>
<div class="row">
<label for="phone">Phone:</label>
<input type="tel" id="phone" name=""> </br> </br>
</div>
<div class="row">
<label for="email">Email:</label>
<input type="email" id="email" name="">
</div>
</p>
</form>
#theForm {
color:white;
display: table;
padding: 15px;
background-color: #2C8F77;
border: solid 2px black;
}
.row {
display: table-row;
}
.row label {
display: table-cell;
padding: 2px;
text-align:right;
}
.row input {
display: table-cell;
padding: 2px;
}
|
|
| pus acum 8 ani |
|
blurex
Învățăcel
Inregistrat: acum 8 ani
Postari: 97
|
|
Selectors
The Type Selector - select element by type
h1
{
color: blue;
}
The Class Selector - select element with . (se refoloseste si cu alte elemente)
.para
{
color: orange;
}
The ID Selector - select element with # (nu se refoloseste de obicei cu alte elemente)
#para1
{
color: green;
}
Combined Selectors
h2, h3, #para1
{
text-decoration: underline;
}
The Descendant Selector - select element inside another element
div p
{
font-style: italic;
}
The Child Selector - select DIRECT CHILD element
blockquote.test>b //aici .test este o clasa iar <b> este elementul FIU DIRECT
{
color: purple;
}
Sibling Selector - selecteaza ruda cea mai apropiata elementului cu pricina
h1+p
{
color: red; //coloreaza rosu toate <p> la o pozitie distanta de <h1>
}
General Sibling Selector - selecteaza toate rudele elementului cu pricina
h1~p
{
color: blue; //coloreaza toate elementele <p> rude cu <h1>
}
The Wildcard Selector - selecteaza fiecare element de pe pagina
*
{
color: black;
}
The Attribute Selector - selecteaza atributele de la un element
p[lang],
p[lang="fr"] (toate lang cu valoarea fr),
p[lang^="fr"] (toate lang care incep cu fr),
p[lang$="o"] (toate lang care se termina cu o),
p[lang*="us"] (toate lang care contin us),
{
background-color: orange;
}
The nth Child Selector - for selecting a pattern
#right p:nth-child(even) //toate cele pare sunt selectate
#right p:nth-child(odd)
#right p:nth-child(3n) //se repeta la fiecare 3 <p>
#right p:nth-child(3n + 4) // se repeta la fiecare 3 <p> dar incepand cu poz 4
{
background-color: orange;
}
The not Selector - selecteaza toate elementele care nu sunt un specific element
:not(p)
{
color: darkgreen;
}
The First-Letter Selector - evident, selecteaza prima litera a unui element
p::first-letter
{
font-size: 24px;
}
The First-Line Selector - selecteaza prima linia a unui element
p:first-line
{
color: red;
}
Modificat de bluroot (acum 8 ani)
|
|
| pus acum 8 ani |
|
blurex
Învățăcel
Inregistrat: acum 8 ani
Postari: 97
|
|
Linear Gradients
#box1
{
width: 800px;
height: 300px;
float: left;
opacity: 0.5;
background: blue;
background: linear-gradient(to top right, blue, yellow)
//background: linear-gradient(45deg, green, blue 20%, yellow) //de la 20% in jos, picteaza albastru
//background: linear-gradient(rgb(255,255,0,0.3), rgba(0,0,255,1)); //aici se aplica si opacitate
}
Text Shadow
#text1
{
text-align: center;
font: bold 60px Helvetica;
text-shadow: 3px 3px 20px orange, //prima dimensiune - orizontala, a doua - verticala, a treia blurring
3px 3px 20px blue;
//text-shadow: 6px 6px 10px rgba(0,0,250,0.3) //rgba a-ul inseamna opacitate
}
Box Shadow
#box1
{
width: 600px;
height: 200px;
background-color: blue;
box-shadow: 15px 15px 5px, 7px orange; // a patra dimensiune - spread radius
//box-shadow: inset 0 0 15px black; //inner shadow sau inner glow
}
|
|
| pus acum 8 ani |
|
blurex
Învățăcel
Inregistrat: acum 8 ani
Postari: 97
|
|
Part 1 - The Layout
-laying out the sections
-adding content
Part 2 - Types of Layouts
-fluid
-fixed
Part 3 - Master and Content Pages
Modificat de blurex (acum 8 ani)
|
|
| pus acum 8 ani |
|
blurex
Învățăcel
Inregistrat: acum 8 ani
Postari: 97
|
|
Șmecherii:
margin 10px 320px 10px 10px; //TOP RIGHT BOTTOM LEFT ca sa nu mai scrii margin-top etc.
clear: right; //The clear property specifies on which sides of an element floating elements are not allowed to float; folosit cand am facut un sidebar in dreapta si am pus un altul sub el si trebuia sa le alinieze
.imagesidebar
{
opacity: 1.0;
transition: opacity 0.5s ease-in-out; //selecteaza tranzitia pentru hover
}
.imagesidebar:hover //face efect de hover
{
opacity 0.8;
}
/*COMMENT HERE IT COMES*/
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%); //align text/image vertically
p
{
color: blue !important; // face overwrite la orice alta optiune, buna cand faci schimbari si nu stii ce sa schimbi
}
Modificat de blurex (acum 8 ani)
|
|
| pus acum 8 ani |
|